Material-components-web: Investigate how discrete slider can allow step values < 1

Created on 16 Oct 2017 · 7Comments · Source: material-components/material-components-web

What MDC-Web Version are you using?

0.22.0

What browser(s) is this bug affecting?

All

What OS are you using?

All

What are the steps to reproduce the bug?

Create and initialize a discrete slider
Set step value to e.g. 0.5
The resulting step value will be 1, not 0.5

What is the expected behavior?

A step value of 0.5

What is the actual behavior?

A step value of 1

Any other information you believe would be useful?

https://github.com/material-components/material-components-web/blob/b77895b82850872ba2acdac94f8807c09adc50f3/packages/mdc-slider/foundation.js#L218

Explicitly sets the value to 1, when it is < 1.

This is in contradiction with the documentation (README) which says: "The step value can be any positive floating-point number", and "Discrete sliders are required to have a positive step value other than 0".

backlog bug

Source

gjdev

Most helpful comment

+1 For this. I'm using it within Data Science applications and the ability to show discrete values and steps for < 1 would be a much welcome addition.

jamesmfriedman on 12 Feb 2018

👍4

All 7 comments

Thanks for pointing this out. We suspect that in this case it might be a problem with the docs being ambiguous, and that discrete sliders may be intended to have integer step values. We're going to inquire with the design team to make sure.

kfranqueiro on 16 Oct 2017

Feedback from design is that ideally discrete should support any nonzero step value (and it technically already does, just not in between 0 and 1). So this is a bug.

This also brings up another issue, in that numbers with decimal places may very quickly outgrow the drop shape that they are currently displayed within. (This is also a problem simply with a max value of, say, 200 or greater.) I'll enter a separate bug for that. (Edit: entered #1437.)

kfranqueiro on 17 Oct 2017

Further feedback I've received after talking to the rest of the MDC Web team is that the way we've initially implemented discrete slider is clearly tailored to integer values for step, so in the immediate future we're planning to clarify the documentation in that regard.

We expect to be revisiting Slider's design in the future, and will approach long values in general (including fractional ones) at that point in #1437.

kfranqueiro on 19 Oct 2017

Understood. In that case maybe also change the logic in setStep() to only allow integral values for now?

gjdev on 20 Oct 2017

In the interim, I worked around this problem by using % percentage values, so for example instead of range min=1, max=2 with step=0.25, I use min=100, max=200 with step=25 which is suboptimal because the discrete popup values displayed to my users (or even the screen reader accessible ARIA labels) do not match the expected possible slider values, in terms of UX.

The culprit seems to be || step < 1 in:
https://github.com/material-components/material-components-web/blob/8f98c7e24e6f9131aac2e461cdef934500e3ae74/packages/mdc-slider/foundation.js#L218

danielweck on 29 Oct 2017

+1 For this. I'm using it within Data Science applications and the ability to show discrete values and steps for < 1 would be a much welcome addition.

jamesmfriedman on 12 Feb 2018

👍4

+1 For this. I'm using it within Data Science applications and the ability to show discrete values and steps for < 1 would be a much welcome addition.

I need float steps.

I'm also using it in a data science setting. I enable using the component in Panel which is a framework for creating analytics apps in Python using the tools you know and love :-)