0

I've seen a nice solution to a slider value on another question

The answer by Andres Ilich is a very nice solution here when there is one slider but what if I want to have multiple sliders on a page?

See Fiddle

<div id='termslider'></div>
<div id='coverslider'></div>

with accompanying JavaScript and CSS

I've renamed the original tiptool classes in an attempt to differentiate the two sliders but so far without success.

Community
  • 1
  • 1
Kevin
  • 61
  • 8

1 Answers1

1

You are setting the html relative to class selection, which is setting both tooltip slider handle:

$("#termslider").slider({
...
slide:
$('.ui-slider-handle').html(tooltip)
...
create:
$('.ui-slider-handle').html(tooltip);

});


$("#coverslider").slider({
...
slide:
$('.ui-slider-handle').html(tooltip)
...
create:
$('.ui-slider-handle').html(tooltip);

});

What you need is to set the slide handler of the related division, you can use jquery find function as follows:

$(this).find('.ui-slider-handle').html(tooltip);

Check the working fiddle : http://jsfiddle.net/db8j4g0r/5/

KAD
  • 10,972
  • 4
  • 31
  • 73