Question

我试图从jQuery示例here中找出是否可以将滑块的当前值设置为滑块旋钮上显示的文本。

因此，当用户更改滑块时，新值将不断更新为实时显示为滑块旋钮表面上的文本的数值。

  $(document).ready(function() {
    $("#slider").slider();
  });

  <div id="slider"></div>

有办法吗？

Answer 1

@ EvilMM的答案几乎是正确的，但他/她忘记了引号，我也经历了滑块值为-1所以我写了一个修复程序。

<div id="slider"></div>

JS：

$("#slider").slider({
    max: 10,
    slide: function (event, ui) {
        m_val = ui.value;
        if (m_val < 0) {
            m_val = 0;
            $(this).slider({ value: 0 });
        }
        $(this).find("a:first").text(m_val);
    }
});

Answer 2

让我们说你的滑块叫做“滑块”，就像你的例子一样：

<div id="slider" class="slider"></div>

然后，在这个div中，有一个生成的链接标记（a）代表旋钮。所以你可以试试这样的东西：

$(document).ready(function() {
  $("#slider").slider(
    slide: function(event, ui){
      $("#slider").find(a:first).text(ui.value);
    }
  );
});

这应该在滑动时在旋钮上写入当前值。你现在要做的就是用css来调整旋钮的格式。

我希望这会有所帮助。

Answer 3

如果您使用的是Jquery UI

$(function(){
var slider = $('#slider1').bxSlider({      
  onBeforeSlide: function(currentSlide, totalSlides){
       alert(currentSlide);  
  }      
});

完成！

如何在jQuery滑块上显示当前滑块值？

3 个答案: