³ÉÈË¿ìÊÖ

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(/staticarchive/d9e0e5bad108aa2b618077600e0f6623d8ae05be.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(/staticarchive/71bfce3cfa9a57575c4b78b83d94427f02a3854c.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;
}