Slider with useRef -> how to update value ?

[etturD4]

I have useRef for Slider

const sliderRef = useRef<HTMLSpanElement>(null!);

then I have Slider

 <Slider
    ref={sliderRef}
    onValueChange={(e) =>
      onSliderChange(e, index)
    }
    className='w-[100%] mx-auto my-[5px] cursor-pointer'
    max={1000}
    step={1}
  />

now, how to I update Slider value with useRef?

[etturD4]

I got this working in this way

    const sliderValue = data.sliderValue / 10;
    const span = sliderRef.current.children[1] as HTMLSpanElement;
    const spanLeft = span.style.left;
    span.style.left = spanLeft.replace("0", `${sliderValue}`);

    const barSpan = sliderRef.current.children[0]
      .children[0] as HTMLSpanElement;
    const barSpanRight = barSpan.style.right;
    barSpan.style.right = barSpanRight.replace("100", `${100 - sliderValue}`);

basically you have to edit second child element of Slider and modify left attribute for to position slider ball.
In my case I replace 0% with another value

And to match color of the bar to correct position you have to manipulate right attribute of the first child of the first child of Slider 😃
not sure if it's mean to be done this way though ?