Components

Slider

Angular Material Slider enables users to select a value from a defined range by sliding a handle along a track. It can hold a single value or a range with two handles, move in steps between a lowest and a highest value, and show the current value above the handle. BuilderKit restyles the track, the thumb and the value label.

Official docs API reference

For a value that is on or off rather than a range, use the slide toggle component.

Example

Below is an example of how BuilderKit restyles the Angular Material Slider and gives it a more modern appearance.

Basic slider

Range slider

Thumb label

<mat-slider>
  <input matSliderThumb />
</mat-slider>

<mat-slider discrete>
  <input matSliderStartThumb value="25" />
  <input matSliderEndThumb value="75" />
</mat-slider>

Range slider

A range slider holds two handles on one track, with the selected span highlighted between them and the labels formatted to taste.

Price range

$120

$380

<mat-slider min="0" max="500" step="10" discrete [displayWith]="formatPrice">
  <input matSliderStartThumb value="120" />
  <input matSliderEndThumb value="380" />
</mat-slider>

Discrete slider with tick marks

A discrete slider shows the current value above the handle while it is dragged, and marks every step on the track so the stops are visible.

Quality

<mat-slider min="0" max="100" step="20" discrete showTickMarks>
  <input matSliderThumb value="60" />
</mat-slider>