Slider for Angular

import { AuiSlider } from '@absoluteui/angular/slider';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Slider page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { slider: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { SliderValue } from '@absoluteui/components/slider';
import { AuiSlider } from '@absoluteui/angular/slider';

@Component({
  selector: 'app-price-filter',
  imports: [AuiSlider],
  template: `<aui-slider label="Price" [range]="true" [min]="0" [max]="500" [step]="10" [format]="eur" [(value)]="price"></aui-slider>`,
})
export class PriceFilterComponent {
  price: SliderValue = [50, 300];
  readonly eur: Intl.NumberFormatOptions = { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 };
}

<aui-slider>

Class AuiSlider; template reference #ref="auiSlider".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is SliderValue. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label; names the thumbs.
hideLabel	boolean	false	Visually hide the label.
description	string		Help text, referenced by the thumbs.
min	number	'0'	Lower bound.
max	number	'100'	Upper bound (greater than min).
step	number	'1'	Values snap to min + n * step.
largeStep	number		Page Up/Page Down step (default: a tenth of the scale in whole steps).
range	boolean	false	Two thumbs selecting [start, end].
orientation	"horizontal" | "vertical"	'horizontal'	Layout and key mapping.
marks	boolean | readonly SliderMark[]		true: a tick per step (up to 100); or explicit { value, label? } marks.
format	NumberFormatOptions		Number format of the value text.
valueText	(value: number) => string		Full value text (overrides format).
disabled	boolean	false	Disable the slider.
name	string		Form field name (hidden inputs; a range submits two values).
showValue	boolean	true	Show the value next to the label.
locale	string	'en-US'	Locale of the value text and thumb names.

Two-way bindings

Model	Type	Change output	Description
[(value)]	SliderValue	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(valueInput)	SliderValueDetail	The value changes while dragging or with a key: { value }. Re-emits aui-input.
(changed)	SliderValueDetail	The value was committed (pointer release or a key): { value }. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setCustomError(message: string | null): void	Show or clear an external error.
focus(): void	Focus the (first) thumb.
reset(): void	Restore the initial value and clear the error.