material-web
material-web copied to clipboard
material-components
Slider doesn't support step="any"
What is affected?
Component
Description
"Continuous" sliders have a step size of 1, so they aren't really continuous as they aren't as smooth as possible. Setting the step size to 0 somehow doesn't fix this, so there's probably also an issue with how they're displayed.
Reproduction
https://material-web.dev/components/slider/
Workaround
I have not found a workaround.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
latest
Browser/OS/Node environment
Browser: Firefox 118.0.1 (64-bit) OS: Fedora Workstation
Sorry for the bad naming in the docs here, but this is unfortunately a limitation with the web platform and seems to be the industry standard for slider implementations.
I recommend setting step="0.1" or to a smaller value in the meantime. We may have to change the documentation here or the default step value, but this is WAI
Odd - at least in FF I made a custom slider that got values with many decimal places and looked smooth. If I could make a PR that fixed this I would, but I'm not sure what needs to change.
Honestly I think we need to discuss this with the team at our thursday eng meetings – if a change is necessary, this needs to be handled carefully as to not make it a breaking change. Additionally adding <md-slider ticks> with a very small step could look really bad.
If you want to open a PR, we can discuss it there. A change would need to happen here:
https://github.com/material-components/material-web/blob/main/slider/internal/slider.ts#L115
or here
https://github.com/material-components/material-web/blob/main/slider/internal/slider.ts#L486
But maybe, since this is how it's generally done across a bunch of other popular component libraries, we might just need to change our documentation to not give users that expectation. As the naming comes from our design docs that are not dependent on an implementation:
https://m3.material.io/components/sliders/overview#65a5e5f9-2aa3-44b5-ad8e-73cf2694975e
Continuous as a taxonomy term from design means without tickmarks, not a slider with infinite fine grained steps.
Like Elliott mentioned, you can set step to something smaller, but we would caution against fine-grained steps below 1. As mentioned on the <input type="range"> mdn page, "because this kind of widget is imprecise, it should only be used if the control's exact value isn't important."
Closing since this is WAI and matches <input type="range"> default behavior.
I don't believe we support step="any". The step value must be a number for <md-slider>. I've updated the title to reflect that.
It may take a bit of investigation to get the logic right, but I think it's possible if you want to take a stab at it. We'd need to update this line to handle 'any', potentially like
const step = (this.step === 0 || this.step === 'any') ? 1 : this.step