reactjs - 材质 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
    }
}

标签： reactjsslidermaterial-uimaterial-design

Answer 1

是的，有可能。

Material-UI Slider 有名为valueLabelFormat的道具

格式函数值标签的值。

参考：

• MUI Slider Props API 文档

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

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

---

使用示例：

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

截屏：