{"id":1406,"date":"2023-09-05T05:00:00","date_gmt":"2023-09-05T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1406"},"modified":"2023-09-07T14:33:40","modified_gmt":"2023-09-07T21:33:40","slug":"using-the-angular-material-slider","status":"publish","type":"post","link":"http:\/\/www.angulartraining.com\/daily-newsletter\/using-the-angular-material-slider\/","title":{"rendered":"Using the Angular Material Slider"},"content":{"rendered":"\n
\n

This is the second guest post by Duncan Faulkner. You can read his first post on Angular Material here<\/a>. This is the second post in this series.<\/p>\n<\/blockquote>\n\n\n\n

The mat-slider<\/a><\/code> was recently rewritten in Angular 15 as part of a refactoring towards MDC (Material Design Components for the Web). The most notable change to the mat-slider<\/code> is the element now requires up to two input<\/code> elements, instead of just a mat-slider<\/code> element, this allows us to use the slider as either a single slider (with one input<\/code>) or a range (with two inputs<\/code>).<\/p>\n\n\n\n

The original mat-slider<\/code> looked like this in versions prior to Angular Material 15:<\/p>\n\n\n

<!-- original --><\/span>\n<mat-slider<\/span>><\/span><\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And in versions after 15:<\/p>\n\n\n
<!-- single slider --><\/span>\n<mat-slider<\/span>><\/span>\n  <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span>\n\n<!-- range slider --><\/span>\n<mat-slider<\/span>><\/span>\n  <input<\/span> matSliderStartThumb<\/span> \/><\/span>\n  <input<\/span> matSliderEndThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Slider usage options<\/h2>\n\n\n\n
It’s also possible to set the range slider to have a min\/max or both, for example:<\/p>\n\n\n
<!-- range slider --><\/span>\n<mat-slider<\/span> [min<\/span>]=\"30\"<\/span> [max<\/span>]=\"75\"<\/span>><\/span>\n  <input<\/span> matSliderStartThumb<\/span> \/><\/span>\n  <input<\/span> matSliderEndThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
If min<\/code> is not supplied then zero is assumed, likewise if max<\/code> is not supplied then one hundred is assumed. If step<\/code> is supplied then max<\/code>is required otherwise the slider will not be able to calculate the step division.<\/p>\n\n\n\n
The thumbLabel<\/code> directive has now been replaced with a new discrete<\/code> attribute, this controls whether the value indicator tool-tip is shown when the slider is dragged.<\/p>\n\n\n
<!-- original --><\/span>\n<mat-slider<\/span> thumbLabel<\/span>><\/span><\/mat-slider<\/span>><\/span>\n\n<!-- replaced with --><\/span>\n<mat-slider<\/span> discrete<\/span>><\/span>\n  <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To show the tick-marks on the slider add the showTickMarks<\/code> attribute.<\/p>\n\n\n
<mat-slider<\/span> showTickMarks<\/span>><\/span>\n  <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
For now the tickInterval<\/code> property has been removed from the API, though this is being reviewed and could be reintroduced in the future. If we want to define the interval of the tick marks we use the step<\/code> property and the tick marks will match the step:<\/p>\n\n\n
<mat-slider<\/span> discrete<\/span> showTickMarks<\/span> step<\/span>=\"10\"<\/span>><\/span>\n  <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The displayValue<\/code> property has also been removed in favour of the new displayWith<\/code> this property controls the text value of the indicator, we need to provide a function for this property where we can manipulate the value to be displayed. We use the min<\/code> property to set the lowest value, the max<\/code> property to the highest value we want the slider to be an set the step<\/code> property to what we want the increment to be.<\/p>\n\n\n
<mat-slider<\/span> min<\/span>=\"0\"<\/span> max<\/span>=\"100000\"<\/span> step<\/span>=\"1000\"<\/span> [displayWith<\/span>]=\"updateLabelWithFn\"<\/span>><\/span>\n    <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
export<\/span> class<\/span> MySliderComponent<\/span> <\/span>{\n  updateLabelWithFn(value: number): string {\n    return<\/span> value >= 1000<\/span> ? Math<\/span>.round(value \/ 1000<\/span>) + 'k'<\/span> : `${value}<\/span>`<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The updateLabelWithFn<\/code> function takes the value from the slider and [in this instance] if the value is greater than or equal to 1000 then it will round the number and divide it by 1000 and concatenate the letter k<\/code> to the end, this helps to keep the text small and in the thumbLabel.<\/p>\n\n\n\n
The valueText<\/code> property has also been removed, we now have two options we can use the input’s aria-label-valueText or use the displayWith<\/code> property.<\/p>\n\n\n
<!--before Angular 15 --><\/span>\n<mat-slider<\/span> [valueText<\/span>]=\"someTextValue\"<\/span>><\/span><\/mat-slider<\/span>><\/span>\n\n<!--after Angular 15 --><\/span>\n<mat-slider<\/span>><\/span>\n  <input<\/span> [attr.aria-valueText<\/span>]=\"someTextValue\"<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span>\n\n<!--after Angular 15 --><\/span>\n<mat-slider<\/span> [displayWith<\/span>]=\"displaySomeTextWithFn\"<\/span>><\/span>\n  <input<\/span> matSliderThumb<\/span> \/><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
With the rewrite the API of the slider has also changed and has introduced two new components the MatSliderThumb<\/code> and MatSliderRangeThumb<\/code> and provide the following properties:<\/p>\n\n\n\n
    \n
  • @Input() value<\/code>: number<\/li>\n\n\n\n
  • @Output() valueChange<\/code>: EventEmitter<\/li>\n\n\n\n
  • @Output() dragEnd<\/code>: EventEmitter<\/li>\n\n\n\n
  • @Output() dragStart<\/code>: EventEmitter<\/li>\n\n\n\n
  • @Input() percentage<\/code>: number<\/li>\n<\/ul>\n\n\n\n
    And the following methods:<\/p>\n\n\n\n
      \n
    • blur<\/li>\n\n\n\n
    • focus<\/li>\n<\/ul>\n\n\n\n
      There are two notable absences from the mat-slider<\/code> and these are:<\/p>\n\n\n\n
        \n
      • invert – this reversed the start and end of the slider<\/li>\n\n\n\n
      • vertical – this rotated the slider 90\u00b0, you could also invert a vertical slider<\/li>\n<\/ul>\n\n\n\n
        These have been removed as they are not part of the Material Design Specification for the Web (MDC).<\/p>\n\n\n\n
        Changing the color of a slider<\/h2>\n\n\n\n
        Like all Angular Material components we can change the color of a mat-slider<\/code> using the color<\/code> property.<\/p>\n\n\n
        <mat-slider<\/span> [color<\/span>]=\"primary\"<\/span>><\/span>\n    <input<\/span> matThumbSlider<\/span>><\/span>\n<\/mat-slider<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
        <\/p>\n\n\n\n
        In our next post, we’ll see how to migrate from Angular Material 14 to 15+.<\/p>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        This is the second guest post by Duncan Faulkner. You can read his first post on Angular Material here. This is the second post in this series. The mat-slider was recently rewritten in Angular 15 as part of a refactoring towards MDC (Material Design Components for the Web). The most notable change to the mat-slider […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,35],"tags":[],"class_list":["post-1406","post","type-post","status-publish","format-standard","hentry","category-angular","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":4,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1406\/revisions"}],"predecessor-version":[{"id":1440,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1406\/revisions\/1440"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1406"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}