3

I want to do this :

  1. Add a handlle to a jQuery slider on some event
  2. That handle should have an id so that when it slides, I can access its value. Any ideas how to do this ? Here is the code in JSfiddle where a slider with two handles is implemented. All I need to do is add handles on the fly by some event triggered and get the values each handle for Further utilization.
GILL
  • 319
  • 4
  • 15

1 Answers1

5

I don't see any possibility according to the documentation on http://jqueryui.com/demos/slider/. You could destroy and recreate the slider when a value is added or removed. This requires you to store all current values of existing handles. Not a super elegant solution but it's the only one I currently see besides updating the jquery ui library.

I updated your fiddle with a simple example: http://jsfiddle.net/FPCRb/4/

T. Junghans
  • 11,385
  • 7
  • 52
  • 75
  • I see the fiddle mentioned above. However, can you suggest any library with some built in function which does what we are trying to do ? Well , to be precise ; I am trying to associate these multiple handles with different variables for further utilization. – GILL Mar 07 '12 at 19:50
  • I'm not sure if I understand fully, but you want to be able to retrieve the values of a given handle at any time? You can use the index to do this. I've updated the fiddle http://jsfiddle.net/FPCRb/10/ and added a variable (an array) ** currentValues** which holds the current values. You could associate variables with the items in **currentValues**. Am I getting closer? – T. Junghans Mar 07 '12 at 21:01
  • I succeeded in getting the values of different handles but I need to do some action on clicking a particular handle and do some other action on clicking the other handle. How to do that ? – GILL Mar 18 '12 at 10:44
  • @GILL No click handlers are provided by jQuery UI so I created my own which you can see on http://jsfiddle.net/FPCRb/25/: `$slider.delegate('a.ui-slider-handle', 'click', function () { alert('Handle with index ' + $(this).index() + ' and value ' + currentValues[$(this).index()]); });` – T. Junghans Mar 18 '12 at 10:59
  • Excellent.....geneous.... plz expalin why you use a.ui-slider-handle whta using 'a'. Why not to use the class id driectly ?. – GILL Mar 18 '12 at 12:33
  • @GILL I do this for performance reasons. See http://stackoverflow.com/questions/46214/good-ways-to-improve-jquery-selector-performance – T. Junghans Mar 18 '12 at 12:34
  • I want to do this 1. customize the shape of a particular handle 2. give a different color to each handle ; – GILL Mar 21 '12 at 10:49
  • jqueryui.com/themeroller gives a pre defined color scheme. But I want to change handle color on the fly (probably that will need a DOM "handle" to a particular slider handle) – GILL Mar 21 '12 at 15:49
  • 2
    @GILL: Check it out: http://jsfiddle.net/FPCRb/39/. I've set different background-colors for the handles. – T. Junghans Mar 21 '12 at 20:35