Slider

Pick a value from a range, with full keyboard support.

import { BuiSlider } from 'ng-blatui';

<bui-slider [(value)]="volume" [min]="0" [max]="100" ariaLabel="Volume" />

With label

Volume60%

<div class="flex items-center justify-between">
  <span class="font-medium">Volume</span>
  <span class="text-muted-foreground tabular-nums">{{ volume() }}%</span>
</div>
<bui-slider [(value)]="volume" [max]="100" ariaLabel="Volume" />

Steps

<bui-slider [value]="40" [min]="0" [max]="100" [step]="10" ariaLabel="Stepped" />

Disabled

<bui-slider [value]="60" [disabled]="true" ariaLabel="Disabled" />

Vertical

<bui-slider class="h-40" orientation="vertical" [value]="40" ariaLabel="Volume" />

Range

30 – 70

<!-- [range]="true" adds a second thumb; bind both handles -->
<bui-slider [range]="true" [(value)]="low" [(endValue)]="high" />

Reactive form

Control value: 45

<!-- ControlValueAccessor: works with formControl / ngModel / signal forms -->
<bui-slider [formControl]="volume" ariaLabel="Volume" />
// volume = new FormControl(45)

API reference

Inputs

Prop	Type	Default	Description
`range`	`boolean`	`false`	Enable a second thumb; binds `endValue` as the upper handle.
`min`	`number`	`0`	Minimum selectable value.
`max`	`number`	`100`	Maximum selectable value.
`step`	`number`	`1`	Increment between selectable values.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	Layout direction of the slider.
`ariaLabel`	`string`	`'Value'`	Accessible label for the thumb(s).

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`number`	`0`	Current value (lower thumb in range mode). Two-way bindable with `[(value)]`.
`endValue`	`number`	`100`	Upper thumb value in range mode. Two-way bindable with `[(endValue)]`.
`disabled`	`boolean`	`false`	Whether the slider is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.