Slider with float numbers do not work as expected.

[DeveloperOskar]

Hello! I am trying to have the slider going from 1-3 and having a 0.1 step. But at 0.7, 1.7 , 2.4 and 2.9 it looks the like label over the slider is not rounding the number since it only a number like this "0000000" extending outside the label.

[avishain]

Hi, can you pleas attach a screenshot so i will have better understanding of the issue.

[olopes]

Hello,

I've also noticed this issue. In this particular case, calling numericValue.toFixed(1) instead of numericValue.toString() would fix the issue. However, it would be interesting to let the developer define a function to format numbers and pass it as a parameter to Slider/RangeSlider. Example:

const MyComponent = () => {
    const [value,setValue] = useState(0);
    const numberFormatter = (value:number) => value.toFixed(1); // convert to string with 1 decimal place
    return (<Slider min={0} max={100} step={0.1} valueOnChange={setValue} formatValue={numberFormatter} />);
}

Using this approach it would also be possible to append a suffix such as a unit name or percent symbol. If you're OK with it, I could prepare a pull request to address this issue. (I have already done it, just give me a couple of days.) What do you think?

[avishain]

Hi @DeveloperOskar, in case it is still relevant - issue was fixed. Hi @olopes, great idea! No problem with PR as long as the new prop will be optional.