Range Slider

Ion Range Sliders cool, comfortable and easily customizable range slider with skins support
Ion Basic Sliders
RefreshManage WidgetsSettings

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. For more info please check out the official documentation

Simple start and customising basic params

Start without params

10010

Set min value, max value and start point

100550

Set type to double and specify range, also showing grid and adding prefix "$"

$200$80002505007501 000
Set up range and step

Set type to double and specify range, also showing grid and adding prefix "$"

-500500-1 000-50005001 000

Using step 250

-500500-1 000-50005001 000

Set up range with fractional values, using fractional step

-3.23.2-12.8-6.406.412.8
Ion Basic Sliders
RefreshManage WidgetsSettings
Lock handles

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

3070

You can even lock both handles

3070
Movement limits

Sometimes you may want to show user full slider, but restict him from using it for 100%. The limits is the tool for you. Try to drag slider, you will see, it has invisible borders on 10 and 50.

010030

You can also highlight this zone:

010030

One more example with limits:

2080020406080100
Disable the slider

You can lock your slider, by using disable option:

010030

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

3070

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

3070
Working with dates and time, using moment.js

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

November 13, 2024

Example with 12 hours time format

May 12th, 11:42 PM

Example with 24 hours time format and localisation to russian:

12th May, 23:4212th May, 17:4212th May, 23:4213th May, 05:42