<mat-slider>允许用鼠标、触摸或者键盘在一个范围内选择一个值,与<input type="range">相似。

<mat-slider> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type="range">.


Note: the sliding behavior for this component requires that HammerJS is loaded on the page.


Selecting a value

slider默认的最小值是0,最大值是100,滑块的步进是1。可通过min, max, step属性来分别设置各个值。如果没有其他设置,初始值为最小值。

By default the minimum value of the slider is 0, the maximum value is 100, and the thumb moves in increments of 1. These values can be changed by setting the min, max, and step attributes respectively. The initial value is set to the minimum value unless otherwise specified.

<mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>




By default sliders are horizontal with the minimum value on the left and the maximum value on the right. The vertical attribute can be added to a slider to make it vertical with the minimum value on bottom and the maximum value on top.

<mat-slider vertical></mat-slider>


An invert attribute is also available which can be specified to flip the axis that the thumb moves along. An inverted horizontal slider will have the minimum value on the right and the maximum value on the left, while an inverted vertical slider will have the minimum value on top and the maximum value on bottom.

<mat-slider invert></mat-slider>


Tick marks


By default, sliders do not show tick marks along the thumb track. This can be enabled using the tickInterval attribute. The value of tickInterval should be a number representing the number of steps between between ticks. For example a tickInterval of 3 with a step of 4 will draw tick marks at every 3 steps, which is the same as every 12 values.

<mat-slider step="4" tickInterval="3"></mat-slider>


The tickInterval can also be set to auto which will automatically choose the number of steps such that there is at least 30px of space between ticks.

<mat-slider tickInterval="auto"></mat-slider>


The slider will always show a tick at the beginning and end of the track. If the remaining space doesn’t add up perfectly the last interval will be shortened or lengthened so that the tick can be shown at the end of the track.

aterial Design手册中建议只在显示分离值(例如打分1到5)的情况下使用tickInterval属性(与thumbLabel属性一样设为1)。

The Material Design spec recommends using the tickInterval attribute (set to 1 along with the thumbLabel attribute) only for sliders that are used to display a discrete value (such as a 1-5 rating).


Keyboard interaction


The slider has the following keyboard bindings:

按键 动作 Action
右方向键 slider值增加一个步进(从右到左方向为减少)。 Increment the slider value by one step (decrements in RTL).
上方向键 slider值增加一个步进。 Increment the slider value by one step.
左方向键 slider值减少一个步进(从右到左方向为增加)。 Decrement the slider value by one step (increments in RTL).
下方向键 slider值减少一个步进。 Decrement the slider value by one step.
Page up slider值增加10个步进。 Increment the slider value by 10 steps.
Page down slider值减少10个步进。 Decrement the slider value by 10 steps.
End 设置为最大值。 Set the value to the maximum possible.
Home 设置为最小值 Set the value to the minimum possible.




Sliders without text or labels should be given a meaningful label via aria-label or aria-labelledby.



API reference for Angular Material slider

import {MatSliderModule} from '@angular/material/slider';




允许用户使用一个滑块在一个范围内选择一个值。与原生的<input type="range">元素的行为相似。

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.

Selector: mat-slider

Exported as: matSlider



属性名 描述 Description
color: ThemePalette
组件的主题色调。 Theme color palette for the component.
disabled: boolean
组件是否失效。 Whether the component is disabled.
invert: boolean
slider是否反转。 Whether the slider is inverted.
max: number
slider的最大值。 The maximum value that the slider can have.
min: number
slider的最小值。 The minimum value that the slider can have.
step: number
slider的步进。 The values at which the thumb will snap.
thumbLabel: boolean
是否显示滑块标签。 Whether or not to show the thumb label.
tickInterval: ‘auto’ | number
刻度间隔。与步进相关,为步进的整数倍。例如间隔为4,步进为3,表示刻度间隔为12。 How often to show ticks. Relative to the step so that a tick always appears on a step. Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
value: number | null
slider的值。 Value of the slider.
vertical: boolean
slider是否为垂直。 Whether the slider is vertical.
change: EventEmitter<MatSliderChange>
slider值发生改变的事件。 Event emitted when the slider value has changed.
input: EventEmitter<MatSliderChange>
slider的滑块移动的事件。 Event emitted when the slider thumb moves.
displayValue: string | number 用于展示目的的值。 The value to be used for display purposes.
onTouched: () => any 通过registerOnTouch (ControlValueAccessor)注册的触摸事件。 onTouch function registered via registerOnTouch (ControlValueAccessor).
percent: number slider值对应的百分比。 The percentage of the slider that coincides with the value.




  • 描述
    • 失焦属主元素。
    • blur the host element


  • 描述
    • 使属主元素获得焦点。
    • set focus to the host element


Additional classes



A simple change event emitted by the MatSlider component.



属性名 描述 Description
source: MatSlider 发生变更的MatSlider。 The MatSlider that changed.
value: number | null 源slider 的新值。 The new value of the source slider.