Changing Slider handle image

Question

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?

Answer 1

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.

Answer 2

#demo-frame > div.demo { 
    padding: 10px !important; 
    float: left;
}
.contentContainer {
    float: left;
    width: 400px;
    height: 500px;
    overflow: hidden;
}
.ui-slider-vertical .ui-state-default { 
    border: none; 
    width: 28px; 
    height: 82px; 
    background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
    left: 0;
    margin-bottom: -41px;
    margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
    background: none;
}
#slider-vertical, .ui-slider {
    border: none;
    width: 50px;
    height: 50px;
    background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}

someone asked in the comment section for sample css code so here's the one I used to change the handle and scrollbar background image to my own custom png image files. Make sure to insert the css AFTER the jquery ui css in the header section.