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: