Custom styling

Because of its simplicity, it is easy to create a custom theme for the slider widget. Using ThemeRoller is one method of theming: we can simply download a new theme, then put it into the theme folder and change the reference within our code to the name of the new theme. Like all other widgets, the slider will be restyled to use the new theme.

To completely change the look and feel of the widget though, we can easily create our own theme file. In your text editor create the following stylesheet:

.background-div {
  height: 50px; width: 217px; padding: 36px 0 0 24px;
  background:  url(../img/slider_outerbg.gif) no-repeat;
}
#mySlider {
  background: url(../img/slider_bg.gif) no-repeat; height: 23px;
  width: 184px; border: none; top: 4px; position: relative; 
  left: 4px;
 }
#mySlider .ui-slider-handle {
  width: 14px; height: 30px; top: -4px;
  background: url(../img/slider_handle.gif) no-repeat;
}

Save this file as sliderTheme.css in the css directory. In slider1.html, add a...