Fit handle within bounds

[mrleblanc101]

How do we fit handle within the slider bound ?

No-ui slider has an exemple for this here

But adding padding like in the exemple doesn't seem to work.

[mrleblanc101]

By using the padding trick above, it looks like it is working at firs; the handle is aligned with the label.

But once you move the handle, you see that the background of the slider is not aligned properly.

[mrleblanc101]

Seems like the noUiSlider doc was missing some things.
I found this issue: leongersen/noUiSlider#1160 (comment)
The fix is to move the background and radius on the parent.

.slider-horizontal {
    padding: 0 8px;
    background-color: var(--slider-bg);
    border-radius: var(--slider-radius);
    .slider-connects {
        margin: 0 -8px;
        width: calc(100% + 16px);
    }
}