How to display the current slider value on the jQuery slider knob?

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 con开发者_高级运维tinually 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?

@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);
    }
});

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.

If you are using Jquery UI

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

Done!