# InputSlider
- **Package**: `KIT`
- **Type**: components
`InputSlider` = `Textfield` + `InputNumber` + `Slider` + ❤️
### Example
```html
```
### API - Inputs
| Property | Type | Description |
|----------|-----|----------|
| [min] | `number` | value in the range of permitted values |
| [max] | `number` | value in the range of permitted values |
| [prefix] | `string` | number |
| [postfix] | `string` | number |
| [quantum] | `number` | |
| [step] | `number` | |
| [segments] | `number[] \| number` | |
| [keySteps] | `TuiKeySteps \| null` | anchor points of non-uniform format between value and position |
| [style.--tui-thumb-size.px] | `number` | size of thumb |
### Usage Examples
#### Textfield customization
Use all powers of `Textfield` : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore `Textfield` 's documentation page for more customization options.
**Template:**
```html
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiInputSlider, TuiTooltip} from '@taiga-ui/kit';
@Component({
imports: [FormsModule, TuiIcon, TuiInputSlider, TuiTooltip],
templateUrl: './index.html',
encapsulation,
changeDetection,
})
export default class Example {
protected value = 42;
}
```
#### InputNumber customization
`InputSlider` is just a slight extension of InputNumber – it has completely the same customization: add `[prefix]` / `[postfix]` , configure separators specific for your locale via NumberFormat directive or etc.
**Template:**
```html
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNumberFormat} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';
@Component({
imports: [FormsModule, TuiInputSlider, TuiNumberFormat],
templateUrl: './index.html',
encapsulation,
changeDetection,
})
export default class Example {
protected value = 9_999.9;
}
```
#### Slider customization
Slider automatically inherits `[min]` / `[max]` properties from `[tuiInputSlider]` (don't set them for `Slider` to avoid any possible conflicts!). However, feel free to configure `Slider` 's-specific properties: `[step]` , `[keySteps]` and `[segments]` . Also, you can use mixin-helper `tui-slider-ticks-labels` to arrange ticks' labels (it places them strictly below ticks).
**Template:**
```html
20%40%60%80%
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';
@Component({
imports: [FormsModule, TuiButton, TuiInputSlider],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {
protected readonly max = 100;
protected readonly min = 0;
protected readonly step = 20;
protected value = 20;
protected increase(): void {
this.value = Math.min(this.value + this.step, this.max);
}
protected decrease(): void {
this.value = Math.max(this.value - this.step, this.min);
}
}
```
**LESS:**
```less
@import '@taiga-ui/styles/utils';
.slider-ticks-labels {
.tui-slider-ticks-labels();
}
button {
margin: -0.125rem;
}
```
#### 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.
**Template:**
```html
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiKeySteps} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';
@Component({
imports: [FormsModule, TuiInputSlider],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {
protected value = 10;
protected readonly min = 0;
protected readonly max = 1_000;
protected readonly step = 5; // 100% / 5% = 20 total steps
protected readonly ticksLabels = ['0', '10', '100', '500', '1000'];
protected readonly keySteps: TuiKeySteps = [
// [percent, value]
[0, this.min],
[25, 10],
[50, 100],
[75, 500],
[100, this.max],
];
}
```
**LESS:**
```less
@import '@taiga-ui/styles/utils';
.slider-ticks-labels {
.tui-slider-ticks-labels();
}
```
#### 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` .
**Template:**
```html
Control value:
{{ value | json }}
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputSlider} from '@taiga-ui/kit';
@Component({
imports: [FormsModule, JsonPipe, TuiInputSlider],
templateUrl: './index.html',
encapsulation,
changeDetection,
})
export default class Example {
protected value = 0.5;
// Form control can only contain decimal number which is multiple of this constant
protected quantum = 0.05;
// But granularity of each discrete slider step is equal to this constant
protected readonly step = 0.25;
}
```