Basic examples
Sliders with basic functionality
Basic slider example

Default setup without parameters

10010
Set up range and step

Set up range with negative values

-500500-1 000-50005001 000
Set start point

Set min value, max value and start point

1001 000550
Custom stepping

Set slider step using stepoption

-500500-1 000-50005001 000
Basic range slider

Set type to double and specify range

0200800
Fractional step

Set up range with fractional values

-3.23.2-12.8-6.406.412.8
Customizing values
Prettify visual look of numbers
Custom number values

Set up custom numbers in the grid

01050051020355070
Disable prettify

Big numbers are ugly and unreadable

1000030001000550010000
Custom value names

Using any strings as your values

tenfivezerofoureight
Enable prettify

Looks much better with spacing

10 0003 0001 0005 50010 000
Months values

Another example of using strings

DecAprJanMaySep
Custom separator

Don't like spacing? Add your own separator

10,0003,0001,0005,50010,000
Decorating numbers
Add prefixes, postfixes, symbols etc.
Numbers with prefix

Adding custom prefix to the numbers

$250$75002505007501 000
Decorate both values

Using decorate_bothconfig option

HDD: 145 Gb — HDD: 155 Gb100125150175200
Numbers with postfix

Adding custom postfix to the numbers

250°750°02505007501 000
Decoration separator

Change default separator to your own

HDD: 145 Gb → HDD: 155 Gb100125150175200
Number with no limit

If max number is not the biggest one

Age 401831445770
Remove decoration

No decoration in the second value

HDD: 145 — 155 Gb100125150175200
Advanced examples
More complex slider examples
Values inside container

Prevent numbers from overflowing

1 000 0002 000 0001 000 0001 250 0001 500 0001 750 0002 000 000
Grid values density

Control number of grid values

03070020406080100
Disabled slider

Lock the slider using disableoption

0100300255075100
Attach values to steps

Have predifined step? You can snap grid to it

01 00001 000
Keyboard controls

Arrow keys and WSAD slider control

030700255075100
Fractional step

Attach values to fractional steps

04.6804.689.36
Manipulations
Manipulation intervals, handles etc.
Minimum interval size

Set min interval using min_intervaloption

030700255075100
Lock left handle

Fix fromhandle with from_fixedoption

025075002505007501 000
Maximum interval size

Set max interval using max_intervaloption

030700255075100
Lock right handle

Fix tohandle with to_fixedoption

025075002505007501 000
Dragging interval

Enable dragging with drag_intervaloption

030700255075100
Lock both handles

You can even lock both slider handles

025075002505007501 000
Other examples
Format date and time, setting limits etc.
Movement limit

Set limits for slider movement

050002505001 000
Moment.js format

Format date using moment.js

Jan 21, 2025Jul 21, 2024Jan 20, 2025Jul 21, 2025
Highlight limited zone

Highlight the zone using from_shadowoption

050002505001 000
Time format

12 or 24 hours time format

04:09 PM10:09 AM04:09 PM10:09 PM
Highlight in range

More complex example of zone highlight

2080020406080100
Localization

Moment.js date and time localization

июльянварьавгустиюль