noUiSlider noUi-connect background image offset

Question

In noUiSlider 10, I was able to create a "groove" background image fpr the .noUi-connect class using gradients, and position it so that the ends of the "groove" did not extend into the rounded edges of the slider background.

In noUiSlider 13, I am no longer able to keep the "groove" out of the end cap.

I've tried the same CSS, but the background-position: left 5px center; trick no longer seems to work.

Manipulating the .noUi-target class background still works, in that I can shrink the background size by 10px, and then move it over to keep the "groove" out of the end caps.

Answer 1

You can slightly resize the noUi-connects element to achieve this effect:

.noUi-connects {
    margin: 0 3px;
    width: calc(100% - 6px); /* 2 * 3px */
}

Updated CodePen.