Hi Guys,
I wanted to customize the JQueryUI slider but am not able to find any way to change the slider handle images. The JQuery Themeroller also does not seem to allow the change of handle images. Does somebody know how to do this?
+5
A:
From the jQuery UI docs:
The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
In this particular case, you want to take a look at the element with classname ui-slider-handle.
The default slider handle element has the following classnames applied to it:
- ui-slider-handle
- ui-state-default
- ui-corner-all
Take a look at the CSS corresponding to these classnames and you will most likely be able to edit everything you need.
Also, I suggest you install Firebug. This Firefox plugin will make tasks like these a lot easier on you.
Aron Rotteveel
2009-07-23 09:23:27
I can't find a reference to an image for the slider handle. Even worse, I cannot even find the handle image in /image folder! - currently I have absolutely no clues where the handles are coming from!
Crimson
2009-07-23 10:07:43
ok, finally found the width/length/corner properties making up the current handles. I am also able to change the background image. I think it should work now.
Crimson
2009-07-23 10:39:23
@Crimson - If you have time, it'd be great if you could you put the CSS that you used to alter the handle image in an answer to this question. I'm having the same issue but can't get any CSS working.
Tom
2009-07-30 15:31:40