Basic examples
Sliders with basic functionalityBasic slider example
Default setup without configuration parameters. Initialize slider on
regular input type="text" element
Set up range and step
In the following example slider is configured with a range that has
negative values, both min and from options
Set start point
You can configure mininim value, maximum value and starting point of a
range slider with min, max and start options
Custom stepping
Set slider step using step option. Slider step is always
greater than 0 and could be fractional. Default value is 1
Basic range slider
To configure a basic range slider, set type config option
to double and specify range with from and to
options
Fractional step
A range slider with fractional values, meaning values have decimal values. Negative values are also supported
Customizing values
Prettify visual look of numbersCustom number values
Set up custom numbers in the grid using an array of numbers in
values config option. Make sure the grid is enabled
Disable prettify
If you need to show big and ugly numbers without any formatting, set
prettify_enabled option to false
Custom value names
Besides numbers in your range slider you can also use any strings as
your grid values in your values array
Enable prettify
Change visual look of big numbers and improve their readability by enabling prettify option and setting separator
Months values
Another example of using strings as values, here the grid and slider values display month shorthand names
Custom separator
Don't like spacing? Add your own separator with
prettify_separator option. Use comma, space or any other symbol
Decorating numbers
Add prefixes, postfixes, symbols etc.Numbers with prefix
Range slider supports custom prefix in values that can be set in
prefix option. It can be any symbol or text
Decorate both values
Determine how to decorate close values. Used for "double"
type and only if prefix or postfix was set up
Numbers with postfix
Adding custom postfix to values with postfix option. Will
be set up right after the number and can be anything
Decoration separator
Set your own separator for close values. Used for double
type. In this example " - " is changed to " → "
Number with no limit
You can manipulate text labels to simulate the value that has no fixed
number. Use max_postfix option
Remove decoration
You can turn off decoration of the second value by setting
decorate_both configuration option to false
Advanced examples
More complex slider examplesValues inside container
If force_edges is set to true, slider will be
always displayed inside its container and numbers won't overflow
Grid values density
You can control the number of grid units with grid_num
option. By default each interval has 4 sub intervals
Disabled slider
If disable option is set to true, slider
becomes inactive and disabled. input is disabled too. Invisible to forms
Attach values to steps
Snap grid to sliders step (step param) by enabling
grid_snap option. If activated, grid_num will not be used
Keyboard controls
If keyboard is set to true (default), slider
can be controlled by keyboard using arrows and A, S,
W and D keys
Fractional step
Attach values to fractional steps by setting grid and
grid_snap options to true. By default grid snap is
disabled
Manipulations
Manipulation intervals, handles etc.Minimum interval size
Use min_interval option to set minimum diapason between
sliders. Works only in double slider type
Lock left handle
Fix 'from' (or start) slider handle by setting from_fixed
option to true. Works in both single and range sliders
Maximum interval size
Use max_interval option to set maximum diapason between
sliders. Works only in double slider type
Lock right handle
Fix 'to' (or end) slider handle by setting to_fixed option
to true. Works in both single and range sliders
Dragging interval
Enable dragging the whole range by setting drag_interval
option to true. Works only in double slider type
Lock both handles
You can lock both slider handles and disable user interaction by setting
both from_fixed and to_fixed to true
Other examples
Format date and time, setting limits etc.Movement limit
Set limits (min and max) for slider movement using
from_min | from_max and to_min | to_max options
Moment.js format
The format of date and time can be changed with moment.js
library. Use min, max, from and
prettify options
Highlight limited zone
If slider has movement limits, the zone can be highlighted with
different color using from_shadow option
Time format
The same as with date formatting, but in this example we changed time format from 24 to 12 hours format
Highlight in range
More complex example of zone highlight, where both
to_shadow and from_shadow are used in range slider type
Localization
Example of a range slider with date/ time localization using
moment.js library. Works with all slider types and options
