Slider: update --slider-bar-width to use 2*var(--slider-size)

[Bvngee]

My goal is to make a RangedSlider that looks something like this:

So after messing around a bit I ended up with the following props:

<RangeSlider thumbSize="6" styles={{ thumb: { borderWidth: 0 }}} />

However, by default, the bar component of the slider is not placed at equal distances from both of the thumbs, so it looks horrible:

After playing around in firefox's css inspector for a bit, I was able to figure out that changing the --slider-bar-width property of the mantine-Slider-bar div as such fixed the issue:

This makes sense in my head; First the bar's offset is set to the correct left side unfilled percentage, but then its subtracted by --slider-size for some padding (I assume). Now, after the width of the bar is set to the exact filled percentage, the right side is behind the correct placement by exactly --slider-size, and thus needs to be extended by 2*var(--slider-size) to match the appearance of the left side.

I've also been able to implement this fix in a slightly-hacky way using the Styles API:

<RangeSlider
    thumbSize="6"
    styles={{
        thumb: { borderWidth: 0 },
        bar: { width: "calc(var(--slider-bar-width) + var(--slider-size))", },
    }}
/>

I've verified extremely briefly that it doesn't break regular sliders, but I haven't tested much else at all (I'm doing this solely in the github UI, I merely guessed where the right place to put this is). Apologies, I just don't really have much time atm.

Please feel free to close this if I'm completely wrong about this problem and have a better idea for a solution. I've only just started using this library like yesterday, so I wouldn't be surprised :) Thanks everyone for your work and help!

[Bvngee]

Im even realizing this improves the look of the disabled rangedslider in the docs example: