Material-components-web-components: [mwc-slider] UI doesn't work properly for step < 1

Created on 23 Mar 2020 · 8Comments · Source: material-components/material-components-web-components

Describe the bug
I'm building a slider that goes from -1 to 1, with steps sized 0.01. But the UI doesn't work properly, and the values only are able to be set as -1, 0 and 1.

To Reproduce
Steps to reproduce the behavior:

the HTML goes like this:

<mwc-slider
    min="-1"
    max="1"
    step="0.01"
></mwc-slider>

Expected behavior
The values should range from -1 to 1 continuously, instead of only discrete values (-1 0 1).

Screenshots
Screen-Recording-2020-03-23-at-1 45 01-PM_1

Browser Version (please complete the following information):

OS: Mac OS
Browser Chrome
Version 80.0.3987.132

Slider Components Bug Upstream

Source

Daymannovaes

All 8 comments

Unfortunately this is a known issue reported in https://github.com/material-components/material-components-web/issues/1426. I'll add it to our backlog to track.

asyncLiz on 23 Mar 2020

👍1

I need this solved as well. I need to wrap it into a MWC FloatSlider that takes discrete value, min, max and step.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MWC Slider</title>
    <script src="https://unpkg.com/@material/[email protected]?module" type="module"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
    </head>
  <body>
    <mwc-slider style="width:100%" value="5.2" min="4.2" max="5.6" step="0.1"></mwc-slider>
  </body>

</html>

MarcSkovMadsen on 8 Aug 2020

Looks like I have similar issue, this is my code :

<mwc-slider step=0.0001 min="0.01225" max="0.0125" value="0.01225"></mwc-slider>

I can't drag the slider thumb, it stuck on the left side
Screenshot from 2020-08-12 14-54-11

mahdiridho on 12 Aug 2020

Hello.. Is this issue on the radar? Looks no response yet longer time.

mahdiridho on 9 Sep 2020

The slider does not support float steps. You will need to work around this by normalizing your min, max and step values.

MarcSkovMadsen on 9 Sep 2020

What do you mean does not support float steps? Sounds like no plan to support this bug? I was using paper-slider on my previous polymer projects and no problem with float steps. Since migrating all to litelement, I decided to replace all webcomponents with mwc UI including mwc-slider.

Due to this issue, I'm using my own slider component written in litelement for a while. I thought mwc team will support and fix this bug.

mahdiridho on 9 Sep 2020

I’m a user of mwc. Not a developer.

I just mean that it does not Work and it’s not like mwc ships bug fixes and new features often i believe.

I’ve starting looking for other web component frameworks with more momentum like Fast for this reason.

MarcSkovMadsen on 11 Sep 2020

Well, I'm trying adjust the mwc-slider by creating extended class here :

https://github.com/mahdiridho/mwc-slider-extended

So, I can work with floating points now. I'm not sure it's good solution or no, at least it works for me

mahdiridho on 11 Sep 2020

👍1

Was this page helpful?