InputSlider KIT

Dark modeBackground

InputNumber
`[min]` The lowest value in the range of permitted values	`number`
`[max]` The greatest value in the range of permitted values	`number`
`[prefix]` Uneditable text before number	`string`
`[postfix]` Uneditable text after number	`string`
`[quantum]` Minimum indivisible value Use `0` (default value) to disable this feature and allow any value (that satisfies `min` / `max` / `precision` constraints)	`number`
TuiSlider
`[step]` Granularity of each discrete slider step and value of increase/decrease on keyboard arrows For non-linear slider ( `[keySteps]` property is enabled) `[step]` means percentage of total track length.	`number`
`[segments]` A number of visual segments or an array, in which every number - is ratio of slider's track length in range (0; 1) where to put tick (use `1` for no ticks)	`number \| number[]`	`1`
`[keySteps]` Anchor points of non-uniform format between value and position	`TuiKeySteps \| null`
TuiNumberFormat `[tuiNumberFormat]="{thousandSeparator, decimalSeparator, ..., rounding}"`
`[thousandSeparator]` Symbol for separating thousands	`string`
`[decimalSeparator]` Symbol for separating fraction	`string`
`[precision]` A number of digits after `[decimalSeparator]` ( `Infinity` for an untouched decimal part)	`number`
`[decimalMode]` `always` number of digits after `[decimalSeparator]` is always equal to the precision. `pad` pads trailing zeroes up to precision, if the number is fractional `not-zero` drops trailing zeroes	`TuiDecimalMode`	`'pad'`
`[rounding]` `round` rounds to the nearest number with the specified `[precision]` `floor` rounds down (the largest number with the specified `[precision]` less than or equal to a given number) `ceil` rounds up (the smallest number with the specified `[precision]` greater than or equal to a given number) `truncate` returns the number with the specified `[precision]` by just removing extra fractional digits	`TuiRounding`	`'truncate'`
TextfieldOptionsApplied as a host directive
`[tuiTextfieldSize]` Size Don't use `label[tuiLabel]` inside `s` - size `<tui-textfield />` ! Use outside label or `<input placeholder="..." />` instead.	`TuiSizeS \| TuiSizeL`	`'l'`
`[content]` A template for custom view of textfield value. We strongly recommend to unset this property on focus – otherwise, it breaks UX on attempt to edit field by keyboard!	`PolymorpheusContent`	`''`
IconsApplied as a host directive
`[iconStart]` Icon on the left side	`string`	`''`
`[iconEnd]` Icon on the right side	`string`	`''`
ControlApplied as a host directive
`[readOnly]` Readonly state	`boolean`
`[disabled]` Disabled state (use `formControl.disable()/.enable()` for reactive forms)	`boolean`
`[invalid]` Invalid state	`null \| boolean`
CSS customization
`[style.--tui-thumb-size.px]` Size of thumb	`number`

Taiga UI

GitHub StackBlitz