noUiSlider

Question

是否可以指定noUiSlider绘制的工具提示的位置？默认情况下，它似乎将第一个放在滑块上方，将第二个放在滑块下方。我理解这里的可用性目标，但我想把两者都放在上面或下面。

示例（上下都有工具提示）：http://jsfiddle.net/leongersen/z83oz9np/2/

noUiSlider.create(div, {
    start: [0, 50], // 2 handles
    range: {
        'min': 0,
        'max': 50
    },
    tooltips: true // 2 tooltips but how to position?
});

Answer 1

我认为没有指定标签位置的选项。在您使用的 css 版本中有

.noUi-horizontal .noUi-handle-upper .noUi-tooltip { 
  bottom:-32px 
}

您可以将其覆盖为与其他标签相同：

  .noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    top: -32px;
    bottom: initial;
  }

查看更新后的 fiddle：http://jsfiddle.net/z83oz9np/20/

认为这是在这里做的最好的事情。在 github 的最新版本中，我注意到缺少此样式，因此如果您更新它，请考虑到这一点。

Answer 2

对于在此处找到自己的其他人，这将为您提供比负像素定位更一致的定位：

.noUi-vertical .noUi-handle-upper .noUi-tooltip {
    right: unset;
    left: 120%;
}

这去除了权利：120%；从工具提示并相对于左侧重新定位它，如底部工具提示。

Answer 3

您可以从 css class “.noUi-horizontal .noUi-tooltip”中覆盖属性 "bottom" 例如，要使工具提示位于滑块下方：

.noUi-horizontal .noUi-tooltip  {bottom: -130%;}

Answer 4

对我来说 none 这个解决方案有效，所以我最终得到了我自己的解决方案：

.noUi-horizontal .noUi-tooltip 
{
  left: unset !important;
}

.noUi-target 
{
  direction: unset !important;
}

完成。

noUiSlider - 将两个工具提示都放在滑块上方？

noUiSlider - Place Both Tooltips above Slider?