Slider

New

Choose a numeric value by dragging the handle or using the keyboard.

Native range inputAngular formsChange events

Overview

Use arrow keys to adjust the value, Home for the minimum and End for the maximum.

Volume40

No change yet. No committed value yet.

HTMLValue and events

<av-slider inputId="volume" label="Volume"
  [(ngModel)]="volume" (onChange)="changed($event)"
  (onSlideEnd)="ended($event)" />

Reactive forms and numeric input

Both controls share the same numeric value.

Amount25

Exact amount

HTMLShared form control

// Component: amountValue = toSignal(amount.valueChanges,
//   { initialValue: amount.value });

<av-slider inputId="amount-slider" label="Amount"
  [formControl]="amount" [min]="0" [max]="100" />
<av-input-number inputId="amount" label="Exact amount"
  [ngModel]="amountValue()"
  (ngModelChange)="amount.setValue($event ?? 0)"
  [disabled]="amount.disabled" [min]="0" [max]="100" />

Steps and bounds

Temperature20

Opacity0.5

Disabled

Disabled slider60

Usage and API

Import AvSlider from avero-ui with FormsModule or ReactiveFormsModule. Inputs include inputId, label, min (0), max (100), step (1), disabled, showValue, describedBy and valueText.

Events. onChange emits { value, originalEvent } while adjusting. onSlideEnd emits on the native change event when the value is committed, including keyboard changes. Programmatic writes and resets do not emit either output.

Values. Use a non-nullable numeric form control. Null displays the minimum. Out-of-range or off-step application values are normalized for display without changing the model. Keep application values within the range and aligned to step. Invalid steps fall back to 1; max at or below min disables the slider.

Scope. This version selects a single value horizontally. Two-handle ranges and vertical orientation are not included.

Theme. Customize --av-slider-accent, --av-slider-track, --av-slider-thumb, --av-slider-focus and --av-slider-color.