Question

My client has asked me to code the below UI, the value of the slider is on the actual slider button.
http://img714.imageshack.us/img714/9043/sliderb.jpg

Can anybody point me in the direction of least resistance? and would it be possible to do with the jQuery UI slider or am I going to have to look elsewhere?

Thanks a lot

Answer 1

Sure thing:

$("#slider").slider({
    create: function () {
        /* Set the handle text to min value */
        $(this).find("a.ui-slider-handle").text($(this).slider("option", "min"));
    },
    slide: function (event, ui) {
        $(this).find("a.ui-slider-handle").text(ui.value);
    }
});

With some CSS to spruce it up, you should definitely be able to accomplish that:

a.ui-slider-handle { text-decoration: none; }

Example: http://jsfiddle.net/T5Y7k/1/