Slider
@xui/sliderA draggable handle along a track for choosing a number in a range. Drag the handle or click the track; arrow keys step, Home/End jump to the bounds, and PageUp/PageDown take larger strides. Full ControlValueAccessor.
Install
pnpm add @xui/slider Add the barrel to a standalone component's imports:
import { XuiSliderImports } from '@xui/slider';
@Component({
imports: [XuiSliderImports],
// …
})Examples
Default
Loading preview…
<div class="w-96">
<xui-slider [min]="0" [max]="10" [(value)]="value" aria-label="Amount" />
<p class="text-foreground-muted mt-2 text-sm">Value: {{ value }}</p>
</div>Labelled
Loading preview…
<div class="w-[28rem]">
<xui-slider [min]="0" [max]="100" [stepSize]="1" [labelStepSize]="20" [labelRenderer]="fmt" [(value)]="value" aria-label="Volume" />
</div>Colors
Loading preview…
<div class="flex w-96 flex-col gap-8">
<xui-slider color="primary" [max]="10" [value]="3" aria-label="Primary" />
<xui-slider color="success" [max]="10" [value]="5" aria-label="Success" />
<xui-slider color="warning" [max]="10" [value]="7" aria-label="Warning" />
<xui-slider color="error" [max]="10" [value]="9" aria-label="Error" />
</div>Disabled
Loading preview…
<div class="w-96"><xui-slider disabled [max]="10" [value]="4" aria-label="Disabled" /></div>Vertical
Loading preview…
<xui-slider orientation="vertical" [min]="0" [max]="10" [labelStepSize]="2" [(value)]="value" aria-label="Vertical" />API
A draggable value along a track, with an optional labelled axis.
Variants
colorprimarydraggingfalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''minnumberLower end of the range. Every value the slider takes is clamped to it.0maxnumberUpper end of the range. Every value the slider takes is clamped to it.10stepSizenumberThe granularity values snap to. Also how far one arrow key moves the handle.1labelStepSizenumberSpacing between rendered axis labels; 0 (or a falsy labelRenderer) hides them.1labelRendererXuiSliderLabelRendererFormat a tick value into its label, or false to hide the axis entirely.(value: number) => String(value)colorXuiSliderColorIntent colour of the track fill and the handle.this.config.colororientation'horizontal' | 'vertical'Run the track across (horizontal) or up the page (vertical). Also picks which arrow keys move the handle.this.config.orientationshowTrackFillbooleanFill the track up to the handle, rather than leaving it uniform.this.config.showTrackFilldisabledbooleanBlock interaction and dim the slider.falsevalueInputnumberThe current value. Two-way bindable with [(value)].0Outputs
valueChangenumberEmits the clamped, snapped value whenever it changes — from a drag, a key, or a track click.