Material UI 滑块 - 标签格式

Question

我有以下范围滑块，它显示从 1000 到 1,000,000 的值。

我想以更易读的格式显示标签，例如 100k 1M 1k 等。是否可以在工具提示中格式化标签，使其更有意义对用户而言，不会破坏用户体验。

我想使用这个功能来改变数字的显示方式。

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

是的，有可能。

Material-UI 滑块具有名为 valueLabelFormat

的道具

The format function the value label's value.

参考：

MUI 滑块 Props API document
道具类型定义来源：Slider.d.ts

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

用法示例：

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

截图：

Material UI 滑块 - 标签格式

Material UI Slider - Label Formating

slider

reactjs

material-design

material-ui