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

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


Moment.js date and time localization