Material UI Slider - 标签格式

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 滑块道具 API 文档

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

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

使用示例：

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

截屏：