InputRange KIT

Examples API Setup
Source code
See also
InputNumber, InputSlider, Range, SliderInputRange = Textfield + InputNumber × 2 + Range + ❤️ 2

Override number format

#

TuiNumberFormat allows to customize separators specific for your locale.

Affixes

#

Use prefix / postfix parameters to set non-removable text before / after the number.
To get currency symbol use Currency pipe.

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%

Custom value content

#
In a week
Today

KeySteps

#

Key steps – anchor points of non-uniform format between control's value and slider's position.

When [keySteps] property is enabled, [step] means percentage of total track length.

010K100K500k1000K

Control value:[ 100000, 500000 ]

Quantum

#

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event.

In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

Control value:[ 0.25, 0.75 ]

Using negative values without minus sign

#
Today

Control value:[ -30, 0 ]