材质UI滑块组件:如何以不同的顺序显示值/标记

Question

默认情况下，Material UI滑块以从最小到最大的升序显示标记/值

例如，具有以下配置的滑块：

const marks = [
{
value: 1,
label: '1'
},
{
value: 2,
label: '2'
},
{
value: 3,
label: '3'
},
{
value: 4,
label: '4'
},
{
value: 5,
label: '5'
}
]
<Slider defaultValue={1} step={1} valueLabelDisplay="auto" onChange={handleChange} className={classes.slider} min={1} max={5} marks={marks} />

将如下呈现滑块：1->2->3->4->5

我想更改值/标记的显示顺序，如下所示：2->1->5->4->3(或一般情况下的任何订单，但默认的1到5除外(

任何帮助都将不胜感激，谢谢！

Answer 1

使用数组操作，您可以这样做：

const arr = [1,2,3,4,5];
const arr1 = arr.splice(2).reverse(); // arr1 = [2,1] arr = [3,4,5]
const arr2 = arr.reverse(); //[5,4,3]
const result = arr1.concat(arr2); // [2,1,5,4,3];