Overview
<mat-slider> allows users to select from a range of values by moving the slider thumb. It is similar in behavior to the native <input type="range"> element.
Basic Usage
<mat-slider>
<input matSliderThumb>
</mat-slider>
API Reference
MatSlider
Selector: mat-slider
Exported as: matSlider
Whether the slider is disabled.
Whether the slider displays a numeric value label upon pressing the thumb.
Whether the slider displays tick marks along the slider track.
The minimum value that the slider can have.
The maximum value that the slider can have.
The values at which the thumb will snap.
Theme color of the slider. This API is supported in M2 themes only.
Whether ripples are disabled in the slider.
MatSliderThumb
Directive for the slider thumb (required).
Selector: input[matSliderThumb]
The current value of the slider thumb.
Outputs
Event emitted when the slider thumb value changes.
dragStart
EventEmitter<MatSliderDragEvent>
Event emitted when the user starts dragging the slider thumb.
dragEnd
EventEmitter<MatSliderDragEvent>
Event emitted when the user stops dragging the slider thumb.
Usage Examples
Basic Slider
<mat-slider min="0" max="100">
<input matSliderThumb [(ngModel)]="value">
</mat-slider>
<p>Value: {{ value }}</p>
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-slider-example',
template: `
<mat-slider min="0" max="100">
<input matSliderThumb [formControl]="sliderControl">
</mat-slider>
<p>Value: {{ sliderControl.value }}</p>
`
})
export class SliderExample {
sliderControl = new FormControl(50);
}
Discrete Slider with Tick Marks
<mat-slider min="0" max="100" step="10" discrete showTickMarks>
<input matSliderThumb [(ngModel)]="value">
</mat-slider>
Range Slider
<mat-slider min="0" max="100">
<input matSliderStartThumb [(ngModel)]="startValue">
<input matSliderEndThumb [(ngModel)]="endValue">
</mat-slider>
Disabled Slider
<mat-slider [disabled]="true">
<input matSliderThumb value="50">
</mat-slider>
Accessibility
- The slider thumb uses a native
<input type="range"> element
- ARIA attributes are automatically managed
- Keyboard navigation is fully supported:
ARROW_RIGHT/UP: Increase valueARROW_LEFT/DOWN: Decrease valuePAGE_UP: Increase by large stepPAGE_DOWN: Decrease by large stepHOME: Set to minimum valueEND: Set to maximum value
- Screen readers announce the current value and range
- Use
aria-label or aria-labelledby to provide accessible labels
Advanced Usage
Custom Step Size
<mat-slider min="0" max="1" step="0.1">
<input matSliderThumb [(ngModel)]="decimalValue">
</mat-slider>
export class SliderFormattingExample {
formatLabel(value: number): string {
if (value >= 1000) {
return Math.round(value / 1000) + 'k';
}
return `${value}`;
}
}
<mat-slider min="0" max="100000" step="1000" discrete>
<input matSliderThumb [(ngModel)]="value" [displayWith]="formatLabel">
</mat-slider>
Listening to Drag Events
export class SliderDragExample {
isDragging = false;
onDragStart(event: MatSliderDragEvent) {
this.isDragging = true;
console.log('Drag started:', event);
}
onDragEnd(event: MatSliderDragEvent) {
this.isDragging = false;
console.log('Drag ended:', event);
}
}
<mat-slider>
<input matSliderThumb
(dragStart)="onDragStart($event)"
(dragEnd)="onDragEnd($event)">
</mat-slider>
Color Variants
<mat-slider color="primary">
<input matSliderThumb>
</mat-slider>
<mat-slider color="accent">
<input matSliderThumb>
</mat-slider>
<mat-slider color="warn">
<input matSliderThumb>
</mat-slider>