Components

Slider

Angular Material Slider enables users to select a value from a defined range by sliding a handle along a track.

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>

Slide Toggle

Snackbar