[Slider] Display valueLabel when dragging slider with onChangeCommitted prop.

[imsuvesh]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Slider valueLabel and thumb don’t change their position when dragging slider using onChangeCommitted prop.
When using onChange prop it is working fine but why not implement the same behavior for onChangeCommitted too?
Call the change function when onmouseup event triggers?

Examples 🌈

https://codesandbox.io/s/material-demo-forked-vxsmr?file=/demo.js:1235-1252

Motivation 🔦

I would like to display valuelabel of the slider when a user is dragging over the slider. It would show current value to the user and he would be able to select his desired value on one go, instead of clicking and dragging on slider multiple time to get his desired result.
Currently, it is very difficult to select a specific value in Slider by using onChangeCommitted prop because we are not able to see the current value when dragging.

[eps1lon]

Thanks for the feedback.

When dragging the value is not committed. Therefore onChangeCommitted isn't called. This is explained in https://material-ui.com/api/slider/#props:

onChangeCommitted Callback function that is fired when the mouseup is triggered.

On the other hand, Input does not implement onChagenCommitted which is why you get a warning in the console: Warning: Unknown event handler property `onChangeCommitted`. It will be ignored.

When using onChange prop it is working fine but why not implement the same behavior for onChangeCommitted too?

Why would we need two different props if they implement the same behavior?

[imsuvesh]

@eps1lon Thank You for replying

When dragging the value is not committed. Therefore onChangeCommitted isn't called. This is explained in https://material-ui.com/api/slider/#props:

onChangeCommitted Callback function that is fired when the mouseup is triggered.

Ok, that's Nice, I missed it thanks for the correction.

On the other hand, Input does not implement onChagenCommitted which is why you get a warning in the console: Warning: Unknown event handler property `onChangeCommitted`. It will be ignored.

A gentle Sorry on the input part csb didn't saved it correctly that's why you saw the earlier version of code. Corrected it anyways...

When using onChange prop it is working fine but why not implement the same behavior for onChangeCommitted too?

Why would we need two different props if they implement the same behavior?

My suggestion is why not implement the same behavior for valueLabel and dragging thumb for onChangeCommitted, not to actually put the whole onChange prop functionality.
onChangeCommitted prop is currently working fine and doing what it is supposed to do but, the problem is you don't see the label or thumb movement when you drag which doesn't look good/stylish/rich experience as a user.

See the below gif -

https://codesandbox.io/s/material-demo-forked-vxsmr?file=/demo.js
Here when using onChange when I drag the slider, you can see the change in Label value and movement in the slider which helps me understand at what value I am currently dragging and when I have to stop.
But when I use onChangeCommitted prop, I can't see any slider movement and change in label value until I do mouseup.

The purpose of this whole long rant is, I want to use onChangeCommitted prop and also would like to show label and slider movement because my client wants the slider and I am using onChangeCommitted prop and he complains that he can't see any movement when he drags the slider, I can use onChange to make it look interactive but then it updates state on each step which I don't want.