Javascript 获取滑块的最后一个值

我正在使用HTML滑块（

type=“range”

）。它在转到目标值时更新每个中间值的相关元素。由于它是一个大数据渲染项目，因此会导致应用程序速度减慢。我希望它只取最后一个值，而不是中间值

我正在React项目中使用此元素。我遇到MaterialUI有

onChangeCommitted

事件，但我不想使用外部库

---

是否有任何方法可以模拟此

onChangeCommitted

？

您可以使用

步骤

属性来说明用户可以增加多少范围值。例如，我们可以将

1

作为起始值，将

100

作为最后一个值，并将

step=100

设置为仅允许用户将值从0增加到100

  <input type="range" id="volume" name="volume"
         min="1" max="100" step="100">
  <label for="volume">Volume</label>

卷

使用非受控输入滑块上的

onChange

处理程序来管理取消公告的“昂贵”回调，您可以利用

setTimeout

在过期后调用真正的回调。在每次更改事件时重置超时。使用ref存储计时器id

const [value, setValue] = useState(0);
const timerRef = useRef();

const expensiveCallback = value => {
  console.log('expensiveCallback', value);
  setValue(value); // <-- finally update state, or anything else really
};

const changeHandler = (e) => {
  const { value } = e.target;

  clearTimeout(timerRef.current);
  timerRef.current = setTimeout(() => {
    expensiveCallback(value); // <-- re-enclose latest value
  }, 250); // <-- tune this value to what feels best for you
};

return (
  ...

    <input
      type="range"
      min={0}
      max={1000}
      defaultValue={value} // <-- use default value for uncontrolled input
      onChange={changeHandler}
    />

  ...
);

const[value，setValue]=useState（0）；
const timerRef=useRef（）；
const expensiveCallback=值=>{
console.log（'expensiveCallback'，值）；
设置值（值）；//{
const{value}=e.target；
clearTimeout（timerRef.current）；
timerRef.current=设置超时（（）=>{
费用回收（价值）；//到目前为止您尝试了什么？我尝试了HTML的
onDragEnd
事件，但它适用于整个输入元素，而不是元素的滑块。请访问，以查看和。做一些研究，搜索相关主题；如果遇到问题，请发布您的尝试，使用
[]记录输入和预期输出
snippet editor。这种方法对您有效吗：@OğuzcanBudumlu cool:）在这种情况下，您可能只需删除该问题，因为该问题已在其他地方被询问和回答，但它并不完全满足我的要求。当我减少步长计数时，中间值仍将触发渲染。