Extra - Ion Range Sliders
Basic examples Sliders with basic functionality
Basic 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 step option
Basic range slider
Set type to double and specify range
Fractional step
Set up range with fractional values
Customizing values Prettify visual look of numbers
Custom 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_both config 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 examples
Values inside container
Prevent numbers from overflowing
Grid values density
Control number of grid values
Disabled slider
Lock the slider using disable option
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_interval option
Lock left handle
Fix from handle with from_fixed option
Maximum interval size
Set max interval using max_interval option
Lock right handle
Fix to handle with to_fixed option
Dragging interval
Enable dragging with drag_interval option
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_shadow option
Time format
12 or 24 hours time format
Highlight in range
More complex example of zone highlight
Localization
Moment.js date and time localization