CODEWITHSUNDEEP
reactjsslidermaterial-uimaterial-design
Harsha M V
Harsha M V

Reputation: 54979

Material UI Slider - Label Formating

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

enter image description here

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
    }
}

Upvotes: 6

Views: 17068

Answers (1)

keikai
keikai

Reputation: 15186

Yes, it is possible.

Material-UI Slider has props named valueLabelFormat

The format function the value label's value.

Refer: 

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

Usage sample:

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

Screenshot:

enter image description here

Upvotes: 15

Related Questions