Get Angular Material v2 slider's value while sliding

Question

I am using Angular Material v2 md-slider in a component

@Component({
  selector: 'ha-light',
  template: `<md-slider min="0" max="1000" step="1" 
             [(ngModel)]="myValue" (change)="onChange()"></md-slider>
             {{myValue}}`,
  styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
  myValue = 500;

  constructor() { }

  ngOnInit() { }

  onChange(){
    console.log(this.myValue);
  }
}

and myValue updates just fine and onChange method is being called but only when I stop sliding and release the mouse button.

Is there a way to have myValue update and also have the function called as I am sliding the slider?

I have noticed aria-valuenow attribute which is changing as I am sliding but I am not quite sure how to make a use of it for what I need (if it can be used at all).

DevVersion · Accepted Answer · 2023-02-18T15:22:45.953

78

As of v15

<mat-slider>
  <input (input)="onInputChange($event)" />
</mat-slider>

onInputChange(event: Event) {
  console.log("This is emitted as the thumb slides");
  console.log((event.target as HTMLInputElement).value);
}

Before v15

In your case, you would not listen to the (change) event but rather to the (input) event. Here is an example:

<mat-slider (input)="onInputChange($event)"></mat-slider>

onInputChange(event: MatSliderChange) {
  console.log("This is emitted as the thumb slides");
  console.log(event.value);
}

edited Feb 18 '23 at 15:22

answered Jan 28 '17 at 09:54

DevVersion

1,923
14
15

Great! Is there any time frame when Material beta.2 will be released? – marekb Jan 28 '17 at 18:54
This is not know yet. Sorry -Probably there will be a new release the upcoming week. – DevVersion Jan 29 '17 at 10:08
But there is always a way to use the super-latest version of Material 2. You an use the material2-builds | npm install --save https://github.com/angular/material2-builds.git – DevVersion Jan 29 '17 at 10:09
Small typo up there, should be (input)= and it's npm install --save https://... (https does not appear). But thanks, it's working fine. – marekb Jan 30 '17 at 09:44
@ DevVersion can i set max value for step? means now count on 100 but want 60. for example 9.60 after 10 not 9.61 – Shailesh Ladumor Jun 27 '17 at 07:14
Does MdSliderChange do the same thing? How do implement MdSliderChange? – Anthony Aug 15 '17 at 17:26
4

This still works with the current version of Material (5.2.0). The `$event` object emitted belongs to the `MatSliderChange` class. You can access its value property like this: `console.log(event.value)`. You can use `(ngModelChange)` if you want to get the event on mouseup, and use `(input)` to get the stream of events emitted while dragging. – JP Lew Feb 17 '18 at 04:34
still working as of `"@angular/material": "~8.2.1",` :) – John Vandivier Dec 09 '19 at 23:34
It would be nice to have a slider configuration (such as `updateOn: 'mouseUp' | 'input'`) to instruct the CVA to update either on `mouseUp` or on `input` event :) To folow SRP I would suggest a directive to do this instead. – Felix Apr 02 '22 at 12:20
No longer working with @angular/material 15, now returns an "Event" without value – RobSeg Feb 17 '23 at 13:42
I've updated the response, maybe it helps? – DevVersion Feb 18 '23 at 15:23

score 3 · Answer 2 · answered Jan 19 '18 at 03:43

3

I was trying to get mat-slider value inside of my component, and I got it by using event.value as shown below. Submitted this answer to help someone like me :) Thanks

<md-slider (input)="onInputChange($event)"></md-slider>

onInputChange(event: any) {
  console.log(event.value);
}

answered Jan 19 '18 at 03:43

user2662006

2,246
22
16

3

This looks as an answer, but it does not attempt to answer the question. It merely confirms the validity of the answer provided by @DevVersion on Jan 28 '17 at 9:54. – scopchanov Aug 17 '19 at 05:07

Get Angular Material v2 slider's value while sliding

2 Answers2

Linked