[Bug]: Slider component doesn't work with decimal

[BradfordSun]

Browser

Edge

Package version

3.0.624

React version

v18.2.0

Description

Hi team, It doesn't work when I try to use the following example code:

<Slider
      onChange={({ detail }) => setValue(detail.value)}
      value={value}
      max={1}
      min={0}
    />

I can't drag the slider to stay on a decimal between 0 and 1 and it only jumps from 0 to 1. When I set the max value to an integer greater than 1, I can slide it in increments of 1.

I try to set it to max={1.0} and min={0.0} but still doesn't work. Setting the step property also does not solve this problem.

Source code

No response

Reproduction

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[pan-kot]

Hello,

It should be possible to set float values as min, max, and step. For example:

const [sliderValue, setSliderValue] = useState(0.5);
const onChange = ({ detail }) => setSliderValue(detail.value);
return (
  <Slider
    value={value}
    onChange={onChange}
    min={0.0}
    max={1.0}
    step={0.1}
  />
);

Alternatively, the values can be formatted to decimals. That might be needed if using referenceValues property which only takes integer values.

const [sliderValue, setSliderValue] = useState(50);
const onChange = ({ detail }) => setSliderValue(detail.value);
return (
  <Slider
    value={sliderValue}
    onChange={onChange}
    valueFormatter={value => value / 100}
    min={0}
    max={100}
    referenceValues={[25, 50, 75]}
  />
);  

[gethinwebster]

Closing issue, please let us know if there are any further questions.