Question

我目前有一个项目（codepen） - http://codepen.io/sturobson/pen/70f2fd8d19fdc76f136f905146218328 使用nouislider - http://refreshless.com/nouislider/

我已经按照我想要的方式工作，但是需要添加一个工具提示，显示此滑块的当前.val。

我目前已经

了

$('#sample-showcase').noUiSlider({
  range : [40,500],
  start : 180,
  step : 10,
  handles : 1,
  slide : function() {
    $('.noUi-handle').append('<span class="tooltip"><span data-replace=".length-slider"></span> Months</span>');
    $('[data-replace]').each(function() {
      var replacer = $(this).data('replace');
      var text = $(replacer).val();
      $(this).text(text);
    });
  }
});

在滑动位中，我有一个附加的跨度。

这项工作正常，但我无法得到 a）要显示的值和b）要更新而不是不断重复追加。

我真的很挣扎，任何指针都会非常感激。

Answer 1

试试这个：

JS：

$slider = $('#sample-showcase').noUiSlider({
  range : [40,500],
  start : 180,
  step : 10,
  handles : 1
}

$tooltip = $('<div class="noUi-value" />')
handle = $slider.data('base').data('handles')[0]
handle.append($tooltip);

和CSS

.noUi-value {
    display: none;
    position: absolute;
    top: -21px;
    left: -20px;
    width: 60px;
    font: bold 10px Verdana;
    text-align: center;
}
.noUi-active+.noUi-value, .noUi-state-tap .noUi-value {
    display: block;
}

添加一个带有当前.val的工具提示给nouislider

1 个答案: