zillow / react-slider

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

Thumb position gap #242

Closed SofiaGR closed 2 years ago

SofiaGR commented 2 years ago

Hello,

I really like this slider and how it is accessible and CSS agnostic, however there is one tiny thing that I wonder if something can be done about it.

I created a sandbox to explain it: https://codesandbox.io/s/festive-shannon-swbmg?file=/src/App.tsx

Is it possible to fix this gap between the track and the thumb? It's literally 1px 😓

Screenshot 2021-11-03 at 15 35 28
stonebk commented 2 years ago

The gap is a result of the border radius on the thumb. If you remove the border radius, you'll no longer see any gap:

Screen Shot 2021-12-21 at 1 25 22 PM

If you want to remove the gap, you can make the thumb larger and offset it to cover the gap.