是否可以在输入 slider 中获取滑块拇指的引用？
[英]Is it possible to get a ref of the slider-thumb in input slider?
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
我想应用工具提示来显示 slider 范围内的拇指值。
我知道有一种方法可以计算 position 等，但我有一个预构建的工具提示组件，可以获取 ref 并将其显示在 position。
如果我得到输入参考，工具提示不会随着拇指移动而只是停留在中间的位置。 有没有办法专门检索拇指的参考？
<input
ref={localRef}
className={'dig-Slider-input'}
type="range"
role="slider"
/>
尝试获取输入的本地参考。 需要获得当地的经验值。
1 条回复
1楼 Mesi 0 2023-02-02 09:45:44
输入元素的缩略图（也称为缩略图句柄）不是标准的 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。
问题未解决？试试搜索： 是否可以在输入 slider 中获取滑块拇指的引用？。
使用jQuery更改纯HTML Slider-Thumb颜色（包括工作的CSS）
[英]Change pure HTML Slider-Thumb color with jquery (working css included)
如何修复不遵循输入范围拇指的自定义范围滑块进度？
[英]How to fix a custom range slider progress not following input range thumb?
html - 使隐藏的拇指出现在点击范围输入 slider 的地方
[英]html - make hidden thumb appear where clicked on range input slider
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.