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!

November 13, 2024November 13, 202500May 13, 2025

Example with 12 hours time format

Nov 13th, 09:05 AMNov 13th, 09:05 PM00Nov 13th, 03:05 PM

Example with 24 hours time format and localisation to russian:

13-го ноября, 09:0513-го ноября, 21:050013-го ноября, 15:0513-го ноября, 09:0513-го ноября, 12:0513-го ноября, 15:0513-го ноября, 18:0513-го ноября, 21:05

One more example, with localisation to japanese:

13日 11月, 午前9時5分13日 11月, 午後9時5分0013日 11月, 午後3時5分13日 11月, 午前9時5分13日 11月, 午後12時5分13日 11月, 午後3時5分13日 11月, 午後6時5分13日 11月, 午後9時5分

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: