React中如何检测range滑块的thumb被点击？如何访问滑块thumb元素？

<input type="range">的滑块thumb是浏览器内置的伪元素（对应::-webkit-slider-thumb、::-moz-range-thumb等CSS选择器），不属于DOM树的普通节点，无法直接通过React ref获取元素实例，可以通过以下两种方式实现点击检测：

方法1：坐标校验法（准确率最高） #

通过点击事件的相对坐标计算点击位置是否落在thumb的尺寸范围内，适合需要严格判断是否点击到thumb的场景：

import { useRef, useState } from 'react';

function YourComponent() {
  const left_slider = useRef(null);
  const [neg_clicked, set_neg_clicked] = useState(false);
  // 你原有逻辑的其他状态：neg_side_val、neg_side_max、neg_side_width等

  const handleSliderClick = (e) => {
    const slider = left_slider.current;
    if (!slider) return;
    const sliderWidth = slider.offsetWidth;
    const min = Number(slider.min);
    const max = Number(slider.max);
    const currentVal = Number(slider.value);
    // 计算当前值对应的thumb中心在滑块上的相对位置
    const ratio = (currentVal - min) / (max - min);
    const thumbCenterX = ratio * sliderWidth;
    // 替换为你自定义的thumb宽度，默认浏览器thumb宽度一般为16px
    const thumbWidth = 16;
    // 判断点击位置是否在thumb范围内
    const isClickOnThumb = Math.abs(e.nativeEvent.offsetX - thumbCenterX) <= thumbWidth / 2;
    if (isClickOnThumb) {
      set_neg_clicked(!neg_clicked);
    }
  };

  return (
    <input
      ref={left_slider}
      onClick={handleSliderClick}
      step={100}
      type="range"
      min={-1000}
      max={neg_side_max}
      value={neg_side_val}
      onChange={(e) => set_neg_side_val(Math.min(900, e.target.value))}
      className="slider left"
      id="my_neg_range"
      style={{
        margin: 0,
        width: `${neg_side_width}px`,
        position: "absolute",
        left: 0,
        zIndex: 2,
      }}
    />
  )
}

方法2：事件状态组合法（实现最简单） #

如果不需要严格区分点击thumb和点击滑块轨道，只需要判断用户是否在操作thumb（包含拖动场景），可以用鼠标事件组合实现：

const [isOperatingThumb, setIsOperatingThumb] = useState(false);

// 给input绑定以下事件即可
onMouseDown={() => setIsOperatingThumb(true)}
onMouseUp={() => setIsOperatingThumb(false)}
onMouseLeave={() => setIsOperatingThumb(false)}

注意事项 #

• 若你通过CSS自定义了thumb的宽度，需要将方法1中的thumbWidth替换为实际设置的CSS值，保证判断精度
• 跨浏览器兼容场景优先使用方法2，不需要适配不同浏览器的默认thumb尺寸差异

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture