CODEWITHSUNDEEP
javascriptjqueryjquery-ui
xtr33me
xtr33me

Reputation: 1106

How to change text on individual jquery slider handles

I have a jquery range slider that I am using to select a percentage of color for an overall image and it can have a dynamic number of handles based on how many elements the user decides to use. I am trying to display the percentage for each of the individual handles of the slider in the handles themselves. I have not had luck in figuring this one out and I'm hoping to get some help/direction.

I have found a number of examples on the net that have selected the ".ui-slider-handle" and then modified the text but I can only seem to get this to change one or all of them to the same text. I also got the slider object and then got its children, then iterated through the children and tried changing the text val for each but it never changes it. Any ideas?

This doesn't work:

myslider.slider({                    
  min: 0,
  max: 100,
  orientation: 'vertical',
  values: handles,
  slide: function( event, ui ) {
    var handleText = $(this)[0].children[0].text;
    handleText = "Test";
    console.log("val should be changed: ",handleText);

    //The below line works, however it changes them all to the same value                   
    //myslider.find("a.ui-slider-handle").text(ui.values);

  }
});

Upvotes: 0

Views: 1285

Answers (1)

ASGM
ASGM

Reputation: 11381

Edited answer: You can use each() to do what you want (and here's a working jsFiddle):

myslider.find("a.ui-slider-handle").each(function( index ) {
     $(this).text(ui.values[index]);
});

Let's break it down:

  1. myslider.find("a.ui-slider-handle") - get all the handle objects, just like you're doing right now.

  2. .each(function( index ) { - apply a function to each element that we just found, using its index in the jQuery object as an argument. each() is what's doing the heavy lifting; more on it here.

  3. $(this).text(ui.values[index]); - make this handle's text the value from our values object that corresponds to this handle's index.

  4. }); - close up the shop.

That should do the trick!

Note: myslider.find("a.ui-slider-handle").text(ui.values); didn't work because, while it selected all the correct handles, it just assigned them one value - your values sequence. You need to use the above method to break up the contents of values and apply them to the handles separately.

Upvotes: 1

Related Questions