Material UI Slider - Label Formating

Question

I have the following Range Slider which displays values from 1000 to 1,000,000.

I want to display the label is a more readable format such as 100k 1M 1k etc. Is it possible to format the label inside the tooltip so it makes more sense for the user and does not break the UX.

I want to use this function to change the way the number is show.

function numFormatter(num) {
    if(num > 999 && num < 1000000){
        return (num/1000).toFixed(0) + 'K'; // convert to K for number from > 1000 < 1 million 
    }else if(num > 1000000){
        return (num/1000000).toFixed(0) + 'M'; // convert to M for number from > 1 million 
    }else if(num < 900){
        return num; // if value < 1000, nothing to do
    }
}

Answer 1

Yes, it is possible.

Material-UI Slider has props named valueLabelFormat

The format function the value label's value.

Refer:

• MUI Slider Props API document

• Source of props type definition: Slider.d.ts

valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);

---

Usage sample:

valueLabelFormat={value => <div>{numFormatter(value)}</div>}

Screenshot: