zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

Not working on Scaled Div #314

Open mastering0409 opened 4 months ago

mastering0409 commented 4 months ago

react-slider is not working properly on scaled div. Can you please help me on this?

<div
  style={{
    transform: `scale(${(windowSize.width / 1920) * 0.85}, ${
      (windowSize.height / 1080) * 0.85
    })`,
    transition: "all",
    transitionDelay: "150",
    width: 1920,
    height: 1080,
  }}
>
  <ReactSlider
    className="horizontal-slider w-[100px] h-4 cursor-pointer rounded-full flex items-center relative"
    min={0}
    max={100}
    value={videoSound}
    onChange={(value) => setVideoSound(Number(value))}
    step={1}
    thumbActiveClassName="bg-[#DDAE51] h-3"
    thumbClassName="w-4 h-3 bg-[#DDAE51] rounded-full"
    trackClassName-0="track-0"
    trackClassName-1="track-1"
  />
</div>