InputRange KIT

TuiNumberFormat allows to customize separators specific for your locale.

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

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

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.

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 .