css - noUiSlider noUi-connect 背景图片偏移

Question

在 noUiSlider 10 中，我能够使用渐变为 .noUi-connect 类创建一个“凹槽”背景图像，并将其定位为使“凹槽”的末端不会延伸到滑块背景的圆形边缘。

在 noUiSlider 13 中，我不再能够将“凹槽”保持在端盖之外。

我尝试过相同的 CSS，但 background-position: left 5px center; 诡计似乎不再起作用。

操作 .noUi-target 类背景仍然有效，因为我可以将背景尺寸缩小 10 像素，然后将其移动以使“凹槽”远离端盖。

标签： cssnouislider

Answer 1

您可以稍微调整noUi-connects元素的大小以实现此效果：

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

更新了 CodePen。