Is it possible to get a ref of the slider-thumb in input slider?

Question

I want to apply a tooltips to show the value of the thumb in a range slider.

I know there's a way to do it with calculating the position and such, but I have a pre-build tooltips component that can take the ref and display it at the position.

If I get the input ref, the tooltip doesn't move with the thumb and just stay in place in the middle. Is there a way to retrieve the ref for the thumb specifically?

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

tried getting the local ref of input. Needs to get the local ref of thumb.

Answer 1

The input element's thumb, also known as the thumb handle, is not a standard HTML element and therefore cannot have a reference assigned to it. However, you can use JavaScript to dynamically calculate the position of the thumb based on the value of the slider, and then use that information to position your pre-built tooltips component. You can use the offsetLeft property of the input element and the clientWidth property of the thumb to calculate its position relative to the left edge of the input element.

Check below code as an example,

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;

Note: The above code assumes that the thumb handle is styled with a.thumb class.