是否可以在輸入 slider 中獲取滑塊拇指的引用？

Question

我想應用工具提示來顯示 slider 范圍內的拇指值。

我知道有一種方法可以計算 position 等，但我有一個預構建的工具提示組件，可以獲取 ref 並將其顯示在 position。

如果我得到輸入參考，工具提示不會隨着拇指移動而只是停留在中間的位置。 有沒有辦法專門檢索拇指的參考？

        <input
          ref={localRef}
          className={'dig-Slider-input'}
          type="range"
          role="slider"
        />

嘗試獲取輸入的本地參考。 需要獲得當地的經驗值。

Answer 1

輸入元素的縮略圖（也稱為縮略圖句柄）不是標准的 HTML 元素，因此無法為其分配引用。 但是，您可以使用 JavaScript 根據 slider 的值動態計算拇指的 position，然后將該信息用於 position 您預構建的工具提示組件。 您可以使用輸入元素的 offsetLeft 屬性和拇指的 clientWidth 屬性來計算其相對於輸入元素左邊緣的 position。

以下面的代碼為例，

import React, { useRef, useState } from 'react';

const Tooltips = ({ value }) => {
  const inputRef = useRef(null);

  const [thumbPosition, setThumbPosition] = useState(0);

  const handleInputChange = () => {
    const thumb = inputRef.current.querySelector('.thumb');
    const { offsetLeft, clientWidth } = inputRef.current;
    const thumbPosition = (thumb.offsetLeft - offsetLeft) + (clientWidth / 2);
    setThumbPosition(thumbPosition);
  };

  return (
    <div className="slider-container">
      <input
        ref={inputRef}
        className="slider"
        type="range"
        onChange={handleInputChange}
      />
      <div className="tooltip" style={{ left: `${thumbPosition}px` }}>
        {value}
      </div>
    </div>
  );
};

export default Tooltips;

注意：以上代碼假定拇指手柄的樣式為 a.thumb class。