Material: md-slider should have a option to update the model after the user has stopped sliding it.

[Darwesh27]

Right now when we slide the slider, the model value changes. But if that model value is bind to some variable on backend, then sliding it will cause a lot of server calls. I want the slider to update the server only when the user has set its value, and mouse has left.

[Darwesh27]

This works for discrete slider. But for linear slider there should be an option like that..

[Flertz]

+1
Seiyria bootstrap-slider is a nice example (see events).

[ThomasBurleson]

@Darwesh27 - I do not understand. If I use:

<md-slider 
          md-discrete 
          ng-model="rating" 
          step="1" min="1" max="5" 
          aria-label="rating" flex >
</md-slider>

Then the rating model value will be updated as the slider changes.

[Flertz]

@ThomasBurleson you are right: the rating model value will be updated. But if you want to update some back-end variable ONLY when the user stops to dragging, you should have some events fired from the slider.

[ThomasBurleson]

@Flertz, @Darwesh27 - the team made specific decisions to minimize the use of custom change events. Instead Angular Material expects developers to use standard AngularJS practices to $watch for specific model changes and respond accordingly.

Closed - No change expected.

[dbtek]

@Flertz, @Darwesh27 sure it's a little late however; there might be ones still encountering this case.

ngMouseUp directive perfectly solves the problem here. Bind some model to slider and do stuff with that model on mouseup event.

Hope it'll help. Thanks.

[alwye]

@dbtek ngMouseUp does not work properly, when you start dragging the slider, but end up releasing mouse button out if its zone. However, if your cursor is still over the slider, you will surely be able to catch the event...

[qoshi]

@dbtek @ThomasBurleson
This a very ugly implement for resolve this issue. I tried to using ng-change to resolve this issue, but I failed.

1. ng-mouseup should be added at md-slider-container. This will expand the event to the whole slider area. When click other part inner slider container but not on slider itsself it will call the api and wast of some resource.
2. When we want to type something into the input to modify the value, The stupid ng-mouseup won't fire.
3. $watch is not the best practice for this issue.

[aj-r]

You could use lodash's _.debounce() or a similar method. It might not be perfect, but it would at least cut down on your server calls dramatically.

[SergeyKurdyukov]

@qoshi

ng-mouseup should be added at md-slider-container.

Thank you for suggestion! It helps me.

[pyroflies]

This is still an issue as alwye and qoshi have outlined.
md-discrete seems to catch the mouseup event, but comes with its own set of problems (and different UI you may not want)

My solution - add a temporary event listener

$('#button').on('mousedown', function() {
      document.body.addEventListener("mouseup", release); // add listener to begin watching for mouseup
});
var release = function() {
      myAction(); // your API call here
      document.body.removeEventListener("mouseup", release); // clean up and remove the listener
}

[mk4yukkalab]

You really did not provide an event drop or mouse up on this slider?
I need to navigate to a specific value only when the user selects the right value in the slider its mean on mouse up or drop. Pls, provide this event. Thanks.

[Splaktar]

@mk4yukkalab I would be open to a community PR that adds some custom events (and tests) to the slider. The first step would be to open a new enhancement request with the proposed approach and APIs.