Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Strucutre of the Sprite

Here's a basic Slider:

var mySlider1 = new glow.widgets.Slider("#sliderContainer1", {
  tickMajor: 10,
  tickMinor: 2,
  size: 500
});

All the graphics for the slider are stored in a single image:

The first row is the track of the slider, the 2nd is the "active" track of the slider.

The third row contains the handles. First the normal handle, then "active", then "disabled".

The final row contains the nudge buttons, and the disabled state.

Changing the Graphics

The simplest way to style the slider is by creating your own image sprite in the format above, and overriding the CSS.

Bearing in mind that I have no design skills whatsoever, I created the following:

Graphic:

JavaScript:

var mySlider2 = new glow.widgets.Slider("#sliderContainer2", {
  id: "mySlider2",
  tickMajor: 10,
  tickMinor: 2,
  size: 500
});

The important addition above is "id". By giving your slider an ID (or class) you can target it with CSS without affecting other sliders on the page.

CSS:

#mySlider2 .slider-trackOff,
#mySlider2 .slider-trackOn,
#mySlider2 .slider-handle,
#mySlider2 .slider-btn-bk,
#mySlider2 .slider-btn-fwd  {
  background-image: url(myslider.png);
}

Example:

Remember the bit where I said I had no design skills...

Bigger Changes

The above is simple because the positions and sizes of all the images remain the same. If you're wanting to make bigger changes to the slider you'll need to override more CSS.

Example:

Graphic:

JavaScript:

var mySlider3 = new glow.widgets.Slider("#sliderContainer3", {
  id: "mySlider3",
  size: 700,
  buttons: false
});

The above graphic doesn't include images for the buttons, so we turn them off.

CSS:

#mySlider3 .slider-trackOff,
#mySlider3 .slider-trackOn,
#mySlider3 .slider-handle,
#mySlider3 .slider-btn-bk,
#mySlider3 .slider-btn-fwd  {
  background-image: url(largeslider.png);
  background-repeat: no-repeat;
}
#mySlider3 .slider-container {
  padding: 0;
}
#mySlider3 .slider-trackOff,
#mySlider3 .slider-trackOn {
  height: 75px;
}
#mySlider3 .slider-trackOn {
  background-position: 0 -75px;
}
#mySlider3 .slider-handle {
  width: 74px;
  height: 74px;
  top: 0;
  background-position: 0 -150px;
}
#mySlider3 .slider-active .slider-handle {
  width: 74px;
  height: 74px;
  top: 0;
  background-position: -65px -150px;
}
#mySlider3 .slider-disabled .slider-handle {
  background-position: -130px -150px;
}
#mySlider3 .slider-disabled .slider-handle {
  background-position: -130px -150px;
}
#mySlider3 .slider-disabled .slider-trackOn {
  background-position: 0 0;
}

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.