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

Question

I'm trying to figure out from the jQuery example here whether it's possible to set the current value of the slider as text that appears on the slider knob.

So, as the user changes the slider, the new value would continually update as a number value displayed as text on the surface of the slider knob in real time.

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

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

Is there a way to do that?

Answer 1

@EvilMM's answer is almost right but s/he forgot the quotes and I've also experienced the slider value being -1 so I wrote in a fix for that.

<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

If you are using Jquery UI

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

Done!

Answer 3

Lets say your slider is called "slider", just like in you example:

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

Then, inside this div, there is a generated link-tag (a) that represents the knob. So you could try something like that:

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

This should write the current value on the knob while sliding. What you now have to do, is to play around with the css to format the knob.

I hope this will help a little bit.