Question

I am using a jQuery plugin from here:

http://egorkhmelev.github.com/jslider/

How can I make the left and right handle different colors?

Thanks for the help.

Answer 1

The graphics (or sprites) for these handles/pointers are contained within an image called
jslider.plastic.png. Here’s how it looks: http://egorkhmelev.github.com/jslider/img/jslider.plastic.png

If you create a new image based on jslider.plastic.png but where you make everything red, and name that image “jslider.plastic.red.png” you can then modify the CSS class that is being applied to the right handle like this:

.pointer-to
{
  url(../img/jslider.plastic.red.png); 
}

Now you will have a blue left handle and a red right handle.

–

Another option would be to extend the sprite image jslider.plastic.png with the red versions of the handles. Just add them to the right of the existing blue handles (you see two versions, those represent a non-pressed and a pressed state respectively). And then you will need to alter your css for .pointer-to to look something like this:

.pointer-to
{
     background-position: -40px -40px; // x, y
}

You might have to play with the x-coordinate to get it to align with the image.
This way you will reduce the number of sprite images that needs to be requested by the browser. It’s a good thing to merge these sprite images if you know that you are always going request and use both of them together.