Strot Admin : Blank

As you see, slider labels are far away outside it's container

1 000 0002 000 0001 000 0002 000 0001 000 000 — 2 000 0001 000 0001 250 0001 500 0001 750 0002 000 000

But you can fix it with ease if you wish, with force_edges attribute:

1 000 0002 000 0001 000 0002 000 0001 000 000 — 2 000 0001 000 0001 250 0001 500 0001 750 0002 000 000

Grid will set up automatically, just set grid to true:

010 000010 0000 — 10 00002 5005 0007 50010 000

Want more? Use grid_num:

010 000010 0000 — 10 00001 0002 0003 0004 0005 0006 0007 0008 0009 00010 000

Have predifined step? You can snap grid to it:

010 000010 0000 — 10 00005001 0001 5002 0002 5003 0003 5004 0004 5005 0005 5006 0006 5007 0007 5008 0008 5009 0009 50010 000

Even if you have a very strange step!

01000002.344.687.029.3610

Sometimes you want to forbid dragging one or both handles. Try to move left handle, you can't.

0100307030 — 70

You can even lock both handles

0100307030 — 70

Sometimes you may want to show user full slider, but restict him from using it for 100%

01000030

You can also highlight this zone:

01000030

One more example with limits:

0100208020 — 800102030405060708090100

You can lock your slider, by using disable option:

01000030

After first focus, you can control slider by keyboard (arrow keys and WSAD):

0100307030 — 70

Also you can set up keyboard step (in percents):

0100307030 — 70

You can use native Date object if you wish, but moment.js is better!

April 18, 2024April 18, 202500October 18, 2024

Example with 12 hours time format

Apr 17th, 01:24 PMApr 18th, 01:24 AM00Apr 17th, 07:24 PM

Example with 24 hours time format and localisation to russian:

17-го апреля, 13:2418-го апреля, 01:240017-го апреля, 19:2417-го апреля, 13:2417-го апреля, 16:2417-го апреля, 19:2417-го апреля, 22:2418-го апреля, 01:24

One more example, with localisation to japanese:

17日 4月, 午後1時24分18日 4月, 午前1時24分0017日 4月, 午後7時24分17日 4月, 午後1時24分17日 4月, 午後4時24分17日 4月, 午後7時24分17日 4月, 午後10時24分18日 4月, 午前1時24分

Set minimum interval size:

0100385838 — 58

Set maximum interval size:

0100419141 — 91

Dragging interval:

0100307030 — 70

Dashboard

As you see, slider labels are far away outside it's container

But you can fix it with ease if you wish, with force_edges attribute:

Grid will set up automatically, just set grid to true:

Want more? Use grid_num:

Have predifined step? You can snap grid to it:

Even if you have a very strange step!

Sometimes you want to forbid dragging one or both handles. Try to move left handle, you can't.

You can even lock both handles

Sometimes you may want to show user full slider, but restict him from using it for 100%

You can also highlight this zone:

One more example with limits:

You can lock your slider, by using disable option:

After first focus, you can control slider by keyboard (arrow keys and WSAD):

Also you can set up keyboard step (in percents):

You can use native Date object if you wish, but moment.js is better!

Example with 12 hours time format

Example with 24 hours time format and localisation to russian:

One more example, with localisation to japanese:

Set minimum interval size:

Set maximum interval size:

Dragging interval: