Slider

import { BuiSlider } from 'ng-blatui';

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

<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" />

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

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

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

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

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