@kit-ng-ui/slider

Slider input with ant-design feature parity. Single or range mode, vertical orientation, marks, keyboard navigation, and ControlValueAccessor.

Install

pnpm add @kit-ng-ui/slider

@use '@kit-ng-ui/slider/styles';

Example

<kit-slider [(ngModel)]="volume" [max]="100" />

<kit-slider range [value]="[20, 60]" (valueChange)="onRange($event)" />

<kit-slider vertical [marks]="marks" />

API

| Input | Type | Default | Description | | ------------------ | ----------------------------------- | ------- | ------------------------------------------ | | value | number \| [number, number] | 0 | Current value (or use forms). | | min | number | 0 | Lower bound. | | max | number | 100 | Upper bound. | | step | number | 1 | Quantisation step. | | range | boolean | false | Render two handles; value becomes a tuple. | | vertical | boolean | false | Rotate the slider. | | disabled | boolean | false | Read-only. | | marks | KitSliderMark[] \| null | null | Labelled tick marks. | | included | boolean | true | Whether the filled track is drawn. |

| Output | Type | Description | | -------------- | ----------------------------------- | ------------------------------------------ | | valueChange | number \| [number, number] | Fires on every change. | | afterChange | number \| [number, number] | Fires when the user releases / commits. |