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
