changing JQuery range slider images

Question

I\'m trying to use a JQuery range slider, can add an image for the handles (two of them) fine, but I want both handles to have a different image rather than the same one(lef

Answer 1

Sorry to drag up an old question but I was looking to do the same thing. Unfortunately the above doesn't work as it only targets both 'arrow' tags. This is also due to what jquery ui spits out; both tags have the following markup:

What you need to do is inject or change the classes in the markup so you can target is with some CSS. I found this snippet does the trick:

$(window).load(function(){
//Used for slider with two arrows - start
var firstHandleClass = 'first-handle';
var secondHandleClass = 'second-handle';

handle = $('#slider-range A.ui-slider-handle');
handle.removeClass('ui-corner-all');
handle.removeClass('ui-slider-handle');
handle.addClass('handle_');
handle.eq(0).addClass(firstHandleClass);
handle.eq(1).addClass(secondHandleClass);    

});

Just target the markup with some JQuery. The above adds and removes classes for the two 'arrow' links which you can obviously tailor to your requirements. The above will change the HTML markup to:

which allows you to target each link individually. Hope that helps.