3

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

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
user827570
  • 491
  • 1
  • 8
  • 15

2 Answers2

4

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/

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • Thank you so much it worked great, also I have another quick question. How do you do specific snap to values on the slider? the client doesn't want intervals of say 10 for example he wants 10,20,40,75,100,200. thanks again – user827570 Jan 08 '12 at 02:13
  • @user827570: That's actually a pretty good question It might be better to ask a new question that asks that `:)` – Andrew Whitaker Jan 08 '12 at 02:18
  • @user827570: Actually, I would check out this question on how to do that: http://stackoverflow.com/questions/967372/jquery-slider-how-to-make-step-size-change – Andrew Whitaker Jan 08 '12 at 02:20
0

If you're using Jquery you could get the value of the slider, and then using CSS to put that value on the element of the slider.

Jquery allows you to change the default's UI css styling, so you could use the ID of that element to change it as you see fit.

There are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. Check http://jqueryui.com/demos/slider/#range, check the Theming tab on that link too.

T23
  • 582
  • 2
  • 11