How can I access the styles of an element before it is rendered?

I have implemented a custom progress slider. Is there any way for me to access the width of the wrapper div in `initialSliderWidth` without needing to manually write it? Using refs doesn't work because the component hasn't rendered yet.

```js
type Props = {};

const SliderComponent = (props: Props) => {
  const context = useNotUndefinedContext(AppContext);
  const slider = useRef(null) as any;
  const circle = useRef(null) as any;
  let initialMouseX: number;
  // How to dynamically access slider width?
  const initialSliderWidth = 400;
  let sliderWidth: number;
  let offset: number = -1;

  const handleMouseMove = (mouseMoveEvent: any) => {
    const movedMouseX: number = mouseMoveEvent.clientX;

    let distanceMouseMovedX: number = -(movedMouseX - initialMouseX);

    const numifiedSliderWidth: number = sliderWidth;

    console.log(numifiedSliderWidth);

    const newWidth: number = numifiedSliderWidth - distanceMouseMovedX;

    if (newWidth > initialSliderWidth) {
      return;
    } else if (newWidth < 10) {
      return;
    }

    const newLength = Math.round((newWidth / initialSliderWidth) * 10);

    context.setPasswordLength(newLength !== 0 ? newLength : 1);

    slider.current.style.width = `${String(newWidth)}px`;
    circle.current.style.right = `${String(distanceMouseMovedX + offset)}px`;
  };
  const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
    mouseDownEvent.preventDefault();
    initialMouseX = mouseDownEvent.clientX;
    sliderWidth = numifyStyles(window.getComputedStyle(slider.current).width);
    offset = numifyStyles(circle.current.style.right);
    circle.current.classList.remove("bg-grey-light");
    circle.current.classList.add(
      "bg-grey-dark",
      "border-solid",
      "border-coral",
      "border-2"
    );
  };
  return (
    <div className="block h-[10px] bg-black mt-[32px] relative">
      <div ref={slider} className="block h-[10px] bg-coral w-full h-full absolute"></div>
      <div ref={circle} onMouseDown={handleMouseDown} className="absolute appearance-none bg-grey-light rounded-full w-[28px] h-[28px] inline-block align-middle -right-1 -translate-y-[9px]"></div>
    </div>
  );
};
```

Yeah exactly, I wanna access the initial width immediately...but Im not able to access the initial width until after it renders, so kinda unsure how to solve this issue

Was trying to implement my own progress slider to learn...and judging from how ugly the code is seems like ive got a lot to learn haha

Ooh that's an interesting idea, so just absolutely position the circle to the edge of the rectangle bar thingo, then when you change the width of the rectangle bar, you change the circle location also!

Yeah im trying to implement it myself to learn