InputRange LEGACY

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

Component to input a range of values

Number formatting can be customized by using tuiNumberFormat directive

Basic

#

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

Slider's step changes value by 1 .

But text inputs allow to type decimal number which is multiple of 0.00001 .

Override number format

#

Number formatting can be customized by using TUI_NUMBER_FORMAT .

Custom value content

#
Today
In a week

Visual segments + labels for ticks

#
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: [ 100000, 500000 ]

Using negative values without minus sign

#
Today
Control value: [ -30, 0 ]