材质UI滑块-标签格式

Question

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

我要显示的标签是更具可读性的格式，例如100k 1M 1k等。是否可以在工具提示中设置标签的格式，以便对用户并且不会破坏UX。

我想使用此功能来更改数字的显示方式。

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 Slider具有名为 valueLabelFormat

的道具

格式函数值标签的值。

引用：

• MUI滑块Props API document

• 道具类型定义的来源：Slider.d.ts

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

---

使用示例：

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

屏幕截图：