Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb?
I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solution. Any suggestions?
I require precise center positioning.
First method trick: https://i.sstatic.net/N8A1g.png
Second method trick: https://i.sstatic.net/dqcnp.png
import { useEffect, useState } from "react";
function Slider() {
const [value, setValue] = useState(50);
useEffect(() => {
const tooltip = document.getElementById("tooltip");
const maxValue = document.getElementById("slider").getAttribute("max");
const val = document.getElementById("slider").getAttribute(value);
const center = (value / maxValue) * 100 + "%";
if (tooltip) {
tooltip.style.left = center;
}
});
// Code for handling bubble range removed for demonstration purposes
return (
<>
<div className="range-wrap relative flex h-[24px] w-full items-center">
<input
className="range relative flex w-full"
aria-valuemin={0}
type="range"
min="0"
max="100"
value={value}
id="slider"
onChange={({ target: { value: radius } }) => {
setValue(radius);
}}
/>
<div id="progress"></div>
<div
id="tooltip"
className="bubble absolute top-[-40px] left-1/2 flex h-[38px] w-[32px] -translate-x-1/2 items-center justify-center rounded-full bg-purple-400 align-middle text-body-medium text-white"
>
{value}
</div>
</div>
</>
);
}
export { Slider };