English
latest (v4.7.0)

InputSlider LEGACY

Description and examples API Setup Source code
See also
InputNumber, InputRange, Range, Slider

Component to input a limited range

Number formatting can be customized by using TUI_NUMBER_FORMAT

Basic

#

Look into this example to understand difference between input-props [steps] and [quantum] .

With slider segments + ticks labels

#
Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).
20%40%60%80%

KeySteps

#
Key steps
anchor points of non-uniform format between value and position
010K100K500k1000K

Control value: 10000

With right label

#

With min and max labels

#

Pass PolymorpheusContent into property [valueContent] to create custom label for selected value.

Just a label for min value
Custom label
Digits can't describe my love!