Reputation: 54979
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
}
}
Upvotes: 6
Views: 17068
Reputation: 15186
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:
Upvotes: 15