Slider

import { Component } from '@angular/core';
import { WrSlider } from 'ngwr/slider';

@Component({ imports: [WrSlider] })
export class MyComponent {}

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

200 – 800

<wr-slider [(value)]="priceRange" range min="0" max="1000" step="50" />

<wr-slider [(value)]="stepped" min="0" max="100" step="25" />

<wr-slider [(value)]="volume" disabled />

A value outside [min] / [max] is drawn at the end of the track but stays in the model. Flag it with Validators.max.
null is ignored, so reset() leaves the thumb in place. Reset to a number.
In range mode, bind [low, high]: a single number puts the high thumb at max.

Name	Description	Type	Default
`min`	Lower bound.	`WrSliderValue \| undefined`	`0`
`max`	Upper bound.	`WrSliderValue \| undefined`	`100`
`step`	Step size for keyboard and drag.	`number`	`1`
`range`	Render two thumbs and emit `[low, high]`.	`boolean`	`false`
`disabled`	Disable interaction. Bound automatically from the field's disabled state when used with `[formField]`.	`boolean`	`false`
`readonly`	Refuse value changes while the thumbs stay focusable and the value still submits. Bound automatically from the field's readonly state when used with `[formField]`. The thumbs keep their tab stop and keep announcing their value — arrow keys, Home / End and the pointer simply move nothing — which is the whole difference from `disabled`, where they would leave the tab order entirely. Mirrored as `aria-readonly`, which role `slider` supports.	`boolean`	`false`
`showLabel`	Render the current value below the track.	`boolean`	`true`
`ariaLabel`	Accessible name of the thumb — the single one, or the LOWER one in range mode. Falls back to `slider.label` / `slider.lower`.	`string \| null`	`null`
`upperLabel`	Accessible name of the upper thumb in range mode. Falls back to `slider.upper`.	`string \| null`	`null`
`value`	Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape follows `range`: a plain `number`, or `[low, high]` in range mode.	`WrSliderValue`	`0`
`(touch)`	Emitted on blur so a bound field can mark itself touched.	`void`	—

Built on	Form
Used by	Schema Form

Installation