Thumb size/offset does not take in account the border of the thumb

[hugomassing]

Hello,

when I'm adding a 1px border to the thumb, the calculated offset if the thumb only taking the width value without the border.

gist exemple : https://gist.github.com/hugomassing/156eef503df8ba7d1a087eb36353de03

[stonebk]

I think you just need box-sizing: border-box:

 const StyledThumb = styled.div`
+  box-sizing: border-box;
   height: 16px;
   width: 16px;
   background-color: #FFF;
   border: solid 1px #e5e7eb;
   border-radius: 50%;
   cursor: pointer;
   top: -6px;
   :focus {
     outline: none;
   }
`;

[hugomassing]

@stonebk Hello, even with box-sizing: border-box, thumbSize is not taking into account the border. Only solution I found is to substract the my border*2 to the width of the Slider.

[stonebk]

@hugomassing here is your code in a codesandbox: https://codesandbox.io/s/elated-bush-xzjv6

Can you update that example to make it more clear what the issue is you are having?

[hugomassing]

@stonebk I've updated my exemple. It happens when using the slider in a fixed width div, i.e. a modal. I've included the "hack" fix I use. You can see the overflow: scroll is making the slider scroll horizontally. https://codesandbox.io/s/clever-frog-eyj3p

Hope it's clearer for you! sorry for my first explanation.

[stonebk]

Published in react-slider@1.0.2

[hugomassing]

Thank you so much!