search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.35k stars 895 forks source link

[mwc-slider] UI doesn't work properly for step < 1 #1028

Closed Daymannovaes closed 3 years ago

Daymannovaes commented 4 years ago

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):

asyncLiz commented 4 years ago

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.

MarcSkovMadsen commented 4 years ago

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/mwc-slider@0.18.0?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>
mahdiridho commented 4 years ago

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

`

`

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

mahdiridho commented 4 years ago

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

MarcSkovMadsen commented 4 years ago

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

mahdiridho commented 4 years ago

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.

MarcSkovMadsen commented 4 years ago

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.

mahdiridho commented 4 years ago

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