slider

slider copied to clipboard

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.

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.

Seems like the noUiSlider doc was missing some things. I found this issue: https://github.com/leongersen/noUiSlider/issues/1160#issuecomment-915094766 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);
    }
}