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)