noUISlider

Question

我有一个带有多个句柄的 noUiSlider，允许指定几个连续的日期期间（示例 = 2 月到 4 月、5 月到 7 月和 8 月到 9 月）。理想情况下，我希望标签显示在连接部分的中心，以描述每个时期的相关内容（例如“当前时期”、“下一时期”）。我在想我可以通过在 noUi-connect 分区上设置一个居中的背景图像来做到这一点。

但是，noUi-connect 分区使用变换 (translate/scale) 样式，这导致我的背景图像被缩放，这是我不想要的。

我还想也许我可以修改 javascript 以在每个非 Ui-connect 分区周围生成一个外部分区，然后我会将背景应用到外部分区上 - 但我无法获得背景从外师出现。

还有其他方法可以实现吗？我唯一能想到的另一件事是在 noUiSlider 对象之外定义了浮动分区，每当我检测到手柄位置发生变化时，我都需要重新定位它。

Answer 1

刚刚意识到另一种方法是将特定 noUi-connect 分区的 innerHtml 设置为我的标签值。比玩背景图片更简单。

但是转换样式仍然影响标签，所以最终结果并没有更好。也许我可以用一个内部分区加载 innerHtml，它以某种方式忽略了转换设置，但我还没有弄清楚如何做到这一点。转换：none 没有任何区别。

Answer 2

您可以在连接之外添加一个元素并对其进行绝对定位。

带有两个手柄的滑块的快速版本（显示第一个手柄的值）：

var origin = slider.querySelector('.noUi-connects');
var node = document.createElement('div');

node.style.textAlign = 'center';
node.style.position = 'absolute';
node.style.zIndex = '10';
node.style.fontSize = '10px';

origin.appendChild(node);

slider.noUiSlider.on('update', function(values, handle, unencoded, tap, positions) {
    node.style.left = positions[0] + '%';
    node.style.right = (100 - positions[1]) + '%';
    node.innerText = values[0];
});

noUISlider - 在连接段内放置标签的任何方式

noUISlider - Any way to place labels within the connect segments