React JS中如何将自定义数组设置为Range Slider的步进值

要让Ant Design的Slider使用自定义数组作为步进值，可通过结合HTML <datalist>标签实现刻度标记与步进控制，完整代码如下：

import React from 'react'
import { useState } from 'react';
import { Slider } from 'antd';

const App = () => {
  // 自定义步进值集合
  const customSteps = [0, 25, 50, 75, 100];
  const [value, setValue] = useState(0);

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <Slider 
        min={customSteps[0]}
        max={customSteps.at(-1)}
        step={1}
        value={value}
        onChange={handleChange}
        list="tickmarks" 
      />
      <datalist id="tickmarks">
        {customSteps.map((step, index) => (
          <option key={index} value={step} label={step} />
        ))}
      </datalist>
    </>
  );
};

核心实现要点： #

• 通过customSteps定义需要的步进值数组
• Slider的min和max分别取数组首尾元素，step设为1保证拖动流畅，同时通过list属性绑定<datalist>的id
• <datalist>中的<option>会渲染对应的刻度点，限制滑块只能停留在自定义步进值上
• onChange回调直接接收滑块当前值，更新状态即可

内容的提问来源于stack exchange，提问作者Kamal