Slider

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

Ion Basic Sliders

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


Set min value, max value and start point


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

Set up range and step

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


Using step 250


Set up range with fractional values, using fractional step

Ion Advanced Sliders

Lock handles

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


You can even lock both handles


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.


You can also highlight this zone:


One more example with limits:

Disable the slider

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):


Working with dates and time, using moment.js

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: