In this article we will learn about Angular Material Slider Example.
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.
Table of Contents
Properties :
- value : Value of the slider.
- min : Minimum value for slider. Default is 0.
- max : Maximum value for slider. Default is 100.
- step : The values at which the thumb will snap. Default is 1. It means the thumb moves in increments of 1 by default.
For example, find the initial value of slider.
<mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>
vertical and invert with Example
- vertical : Boolean value. If the value is true, the slider will be vertical. If this attribute is absent, the default value is false.
<mat-slider min="1" max="10" step="0.5" vertical=""></mat-slider>
- invert : Boolean value. If the value is true the slider will be inverted. If this attribute is absent, the default value is false.
<mat-slider min="1" max="10" step="0.5" invert=""></mat-slider>
thumbLabel :
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.
<mat-slider thumblabel="" step="2" min="1" max="100">
</mat-slider>
Formatting the thumb label
By default, the value in the slider’s thumb label will be the same as the model value, however this may end up being too large to fit into the label. If you want to control the value that is being displayed, you can do so using the displayWith
input.
<mat-slider thumblabel="" [displaywith]="formatThumbLabel" min="1" max="20000">
</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 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.
Keyboard interaction
Key | Action |
---|---|
Right arrow | Increment the slider value by one step (decrements in RTL). |
Up arrow | Increment the slider value by one step. |
Left arrow | Decrement the slider value by one step (increments in RTL). |
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. |
I hope you like this Angular Material Slider Example article.
Also Read :
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- Angular Material Button
- Angular Material Toggle Button Example
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- typescript string to number
- Top 10 VS Code extensions