noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible
The orientation setting can be used to set the slider to
noUiSlider will keep your values within the slider range, which saves you a bunch of validation.
The connect setting can be used to control the bar between the handles, or the edges of the slider
Connected Handles Variation
Slider with tooltip
noUiSlider can provide a basic tooltip without using its events system. Set the tooltips option to
true to enable.
Tooltip slider with different color options, use class
slider-* to quickly create a styled slider. Uses native boostrap colors scheme classes
Ion Range silders
Start without params
Set min value, max value and start point
Set type to double and specify range, also showing grid and adding prefix "$"
Connecting from and two values
Disable visual details
Disable part of visual details
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!
Advanced limit example