Range KIT

Examples API Setup
Source code
See also
InputNumber, InputSlider, InputRange, Slider

Component allows to choose a part of a range

Basic

#

Sizes

#
S-size
Control value: [ 0, 40 ]
M-size
Control value: [ 40, 60 ]

Visual segments + labels for ticks

#

Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).

The mixin accepts only a single argument – size of the slider ( m or s ).
0
250 items
500 items
3/4
MAX

Control value: [ 0, 250 ]

KeySteps

#
010K100K500k1000K

Control value: [ 0, 100000 ]