md-slider

md-slider is a component that 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. You can read more about the slider in the Material Design spec.

Simple example:

<md-slider></md-slider>

Usage

Changing the min, max, step, and initial value

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.

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

Setting the orientation

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.

<md-slider vertical></md-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.

<md-slider invert></md-slider>

Adding a thumb label

By default the exact selected value of a slider is not visible to the user. However, this value can be added to the thumb by adding the thumbLabel attribute.

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

<md-slider thumbLabel tickInterval="1"></md-slider>

Adding ticks

By default a sliders do not show tick marks along the thumb track. They 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.

<md-slider step="4" tickInterval="3"></md-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.

<md-slider tickInterval="auto"></md-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.

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).

Disabling the slider

The disabled attribute can be used to disable the slider, preventing the user from changing the value.

<md-slider disabled value="5"></md-slider>

Value binding

md-slider supports both 1-way binding and 2-way binding via ngModel. It also emits a change event when the value changes due to user interaction.

<md-slider [value]="myValue" (change)="onChange()"></md-slider>

<md-slider [(ngModel)]="myValue"></md-slider>

Accessibility

The slider has the following keyboard bindings:

Key	Action
Right arrow	Increment the slider value by one step. (Decrement in right-to-left-languages).
Up arrow	Increment the slider value by one step.
Left arrow	Decrement the slider value by one step. (Increment in right-to-left-languages).
Down arrow	Decrement the slider value by one step.
Page up	Increment the slider value by 10 steps.
Page down	Decrement the slider value by 10 steps.
End	Set the value to the maximum possible.
Home	Set the value to the minimum possible.

Internationalization

In right-to-left languages the horizontal slider has the minimum value on the right and the maximum value on the left by default. The meaning of the left and right arrow keys is also swapped in right-to-left languages.

API Summary

Inputs

Name	Type	Description
min	number	Optional, the minimum number for the slider. Default = 0.
max	number	Optional, the maximum number for the slider. Default = 100.
step	number	Optional, declares where the thumb will snap to. Default = 1.
value	number	Optional, the value to start the slider at.
tickInterval	"auto" | number	Optional, how many steps between tick marks.
invert	boolean	Optional, whether to invert the axis the thumb moves along.
vertical	boolean	Optional, whether the slider should be oriented vertically.
disabled	boolean	Optional, whether or not the slider is disabled. Default = false.

Outputs

Name	Description
change	Emitted when the value changes due to user interaction.

Future work & open questions

• Update focused, disabled, and value=min states to match spec.
• Should there be an option to not force the end tick to be shown?