Javatpoint Logo
Javatpoint Logo

Angular Material Slider

The <mat-slider> is an Angular Directive used as the enhanced range selector with material styling and animation capabilities. The <mat-slider> allows the selection of a value from a range by mouse, touch or keyboard and it is similar to the <input type="range">. <mat-slider> tag is used when there is a need for a slider in the projects.

Basic slider

Selecting a value

By default, the slider has a minimum value of 0, a maximum value of 100, and a thumb move in increments of 1.

Orientation

The orientation of sliders is horizontal with the minimum value on the left and the maximum value on the right. The vertical attribute is added to the slider to make it vertical with the minimum value and a maximum value at the top.

An inverted feature is also available, specified to flip the axis that moves with the thumb. In the inverted vertical slider the minimum value is on the top and the maximum value is on the bottom.

Thumb label

The selected value of the slider is not visible to the user. But adding the value to the Thumb Lab attribute will be linked to the thumb.

The Material Design Spec uses the Thumb lab attribute (with tickInterval = "1") only for sliders to display discrete values.

Formatting the thumb label

The value in the thumb label is same as the model's value. It is large to fit in the label at the end. If you have to control the displayed value, then use the DisplayWith input.

Slider with custom thumb label formatting

Angular Material Slider
Angular Material Slider

Sliders do not show tick marks on the thumb track. It is enabled by using the tick interval attribute. The value of tick interval is representing the number of steps between ticks.

TickInterval select many steps such that there is 30px of space between ticks.

The slider shows a tick at the beginning and end of the track.

Keyboard interaction

It has the below keyboard bindings:

Key Action
Right arrow It increments the value of slider in single step (decrements in RTL).
Up arrow It increments the value of slider in single step.
Left arrow It decrements the value of slider in single step (increments in RTL).
Down arrow It decrements the value by single step.
Page up It increments the slider value by ten steps.
Page down It decrements the slider value by ten steps.
End It set the value to the maximum possible end.

Example:

app.module.ts

app.component.html

app.component.css

app.component.ts

Output:

Angular Material Slider

Explanation:

We have created four checkboxes by using the mat-checkbox and bind them with NgModel with variables. It is used to customize the slider.

Then, we have created the slider and showcased its attributes with variables in .ts file.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback

  • Send your Feedback to feedback@javatpoint.com

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA