Basic examples
Sliders with basic functionalityBasic slider example
Default setup without parameters
Set up range and step
Set up range with negative values
Set start point
Set min value, max value and start point
Custom stepping
Set slider step using stepoption
Basic range slider
Set type to double and specify range
Fractional step
Set up range with fractional values
Customizing values
Prettify visual look of numbersCustom number values
Set up custom numbers in the grid
Disable prettify
Big numbers are ugly and unreadable
Custom value names
Using any strings as your values
Enable prettify
Looks much better with spacing
Months values
Another example of using strings
Custom separator
Don't like spacing? Add your own separator
Decorating numbers
Add prefixes, postfixes, symbols etc.Numbers with prefix
Adding custom prefix to the numbers
Decorate both values
Using decorate_bothconfig option
Numbers with postfix
Adding custom postfix to the numbers
Decoration separator
Change default separator to your own
Number with no limit
If max number is not the biggest one
Remove decoration
No decoration in the second value
Advanced examples
More complex slider examplesValues inside container
Prevent numbers from overflowing
Grid values density
Control number of grid values
Disabled slider
Lock the slider using disableoption
Attach values to steps
Have predifined step? You can snap grid to it
Keyboard controls
Arrow keys and WSAD slider control
Fractional step
Attach values to fractional steps
Manipulations
Manipulation intervals, handles etc.Minimum interval size
Set min interval using min_intervaloption
Lock left handle
Fix fromhandle with from_fixedoption
Maximum interval size
Set max interval using max_intervaloption
Lock right handle
Fix tohandle with to_fixedoption
Dragging interval
Enable dragging with drag_intervaloption
Lock both handles
You can even lock both slider handles
Other examples
Format date and time, setting limits etc.Movement limit
Set limits for slider movement
Moment.js format
Format date using moment.js
Highlight limited zone
Highlight the zone using from_shadowoption
Time format
12 or 24 hours time format
Highlight in range
More complex example of zone highlight
Localization
Moment.js date and time localization