Data input

Slider

Themed single or range slider with ticks, vertical orientation, and Intl-formatted values.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjSliderComponent } from '@kouji-ui/components';

Loading editor

value

min

max

step

orientation

disabled

readonly

<kj-slider
  [(kjValue)]="value"
  [kjMin]="0"
  [kjMax]="100"
  [kjStep]="5"
  kjOrientation="horizontal"
  kjAriaLabel="Volume"
/>