Slider

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

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: