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

Overview

glow.widgets.Slider is a form control to let the user select a number within a specified range.

The default slider, above, can be created using one line of code:

var mySlider1 = new glow.widgets.Slider("#slider1");

The only parameter used is 'container', which tells the slider where to appear in the page. However, there are many configuration options you can use to customise the slider's behaviour and appearence, some of which are demoed below.

Forms, Ranges, Stepping & Events

These options change and react to the values your slider can produce.

Example

HTML

<form action="#">
  <div id="slider2">
    <label for="slider2input">Slider Value:</label>
    <input type="text" id="slider2input" name="sliderValue" />
  </div>
  <div id="log2"></div>
</form>

JavaScript:

var logDiv2 = glow.dom.get("#log2");
    
var mySlider2 = new glow.widgets.Slider("#slider2", {
  bindTo: "#slider2input",
  step: 10,
  min: -100,
  max: 100,
  onChange: function(event) {
    logDiv2.append( "New value: " + this.val() + "<br />" );
  }
});

Binding to Form Elements (bindTo)

Although optional, you probably want to bind your slider to a form element. When the user changes the value of the slider, the new value will be mirrored in the bound form element.

This means the value the user selects will be submitted along with other form data. A bound form element also provides progressive enhancement and somewhere for screen reader users to manually enter data.

You may wish to hide the input off screen when the Slider appears, but ensure you only hide it for users with JavaScript turn on in a browser compatible with Glow. glow.isSupported will tell you if the user has a Glow-compatible browser.

Changes to the form field will be reflected in the slider. Also, if the slider is disabled the form field will also be disabled.

Value Range (min, max)

By default, the Slider allows the users to select an integer value between 0 and 100 inclusive. This of course can be modified to any 2 numerical values, even negative values.

In the above example the minimum value is to -100, and the maximum 100.

Stepping (step)

By default, sliders have a default stepping value of 1, meaning only integer values can be selected (assuming the minimum value is an integer). In the example above, the stepping value is set to 10, resulting in all values being divisable by 10.

Step can be set to a fractional value, or even 0. If the step is zero, the value is worked out by the pixel position of the handle.

Events (onChange)

The Slider fires various events as it is interacted with by the user. One of these is "change", which is fired every time the value of the slider is changed. You can also listen for this event via the constructor, using the "onChange" property.

See the API documentation for details of other events.

Customising Display, Changing on Drag & Ticks

Example

HTML

<form action="#">
  <div id="slider3">
    <label for="slider3input">Slider Value:</label>
    <input type="text" id="slider3input" name="sliderValue" />
  </div>
  <div id="log3"></div>
</form>

JavaScript

var logDiv3 = glow.dom.get("#log3");
    
var mySlider3 = new glow.widgets.Slider("#slider3", {
  bindTo: "#slider3input",
  size: 400,
  step: 5,
  changeOnDrag: true,
  buttons: false,
  tickMajor: 10,
  tickMinor: 5,
  onChange: function(event) {
    logDiv3.append( "New value: " + this.val() + "<br />" );
  }
});

Customising Display (size, buttons)

By default the Slider comes with nudge buttons on either side and is 300px wide. The buttons may be removed (as above) and the width can be changed.

The width of a slider is a maximum width. The actual width may be shorter to ensure things like ticks and labels land on pixels.

Changing on Drag (changeOnDrag)

Usually, when the user drops the slider handle the bound form field is updated and the change event is fired. You can change this so it happens while the user drags the handle. You can see this in the above example.

Ticks (tickMajor, tickMinor)

You can add a ruler to the bottom of the slider by setting an interval for major and minor ticks. In the above example there's a major tick every 10 values and a minor one every 5.

Snapping & Labels

Example

JavaScript

var mySlider4 = new glow.widgets.Slider("#slider4", {
  size: 400,
  step: 5,
  snapOnDrag: true,
  changeOnDrag: true,
  tickMajor: 10,
  tickMinor: 5,
  labels: 20
});

Snapping (snapOnDrag)

By default the Slider handle can be dragged smoothly and dropped over every pixel. However, there are cases where you would want the handle to snap when it's dropped, or as above, snap when it's dragged.

Labels (labels)

You can give the user a concept of where values appear along a slider using labels. In the above example, labels were set to '20', meaning a numerical label appears every 20 values.

Users can also click on labels to move the handle to that value.

Themes & Text Labels

Example

JavaScript

var mySlider5 = new glow.widgets.Slider("#slider5", {
  step: 10,
  snapOnDrop: true,
  tickMajor: 50,
  tickMinor: 10,
  labels: {
    "0": "Small",
    "50": "Medium",
    "100": "Large"
  },
  theme: "dark"
});

Themes (theme)

The slider has two themes, "light" and "dark". The former is suited to a light background, the latter to a dark background.

Text Labels (labels)

Instead of numberical labels, you can provide text labels for your slider. These text labels can also take HTML strings, so you could for instance use images for labels.

Vertical

You can also set your slider to appear vertically, ideal for volume controls.

Example

JavaScript

var mySlider6 = new glow.widgets.Slider("#slider6", {
  size: 150,
  vertical: true,
  buttons: false,
  tickMajor: 50,
  tickMinor: 5
});

Accessibility

Glow's slider can be focused and controlled using the arrow keys. ARIA is also used to inform screen readers of its purpose and current value.

If the user has images disabled, a basic version of the slider will be drawn using simple CSS.

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.