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:

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 15%;"></a>

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:

<a class="ui-state-default handle_ first-handle" href="#" style="left: 15%;"></a>
<a class="ui-state-default handle_ second-handle" href="#" style="left: 60%;"></a>

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

Answer 2

I guess that should be some CSS thing you have to do .basically the slider should be an achor tab (<a>) and its styled to be displayed as the handle. So by changing the CSS, you can easily change the image. Use firebug to findout what CSS is being used in the handle and then go and edit it.

Firebug is a firefox plugin to help web development. You can inspect the html markup of a page and its styles using that.Infact lot more it can do like checking the http requests etc..

http://getfirebug.com/