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

Form control for setting a numerical value within a range.

Widgets must be called in a glow.onReady() call.

Constructor

new glow.widgets.Slider(container, opts)

Parameters

container
Type
glow.dom.NodeList | Selector | HTMLElement

Container of Slider. The Slider will be appended to this element, retaining existing contents.

opts
Type
Object
Optional
Yes

Options object

bindTo

Form element to bind value to.

Type
glow.dom.NodeList | Selector | HTMLElement
Optional
Yes

Changes to this form element will also cause the Slider to update

buttons

Include fine-tuning buttons?

Type
Boolean
Default
true
Optional
Yes
changeOnDrag

Fire the 'change' event during drag.

Type
Boolean
Default
false
Optional
Yes
className

Values for Slider's class attribute.

Type
String
Optional
Yes

Space separated values.

id

Value for Slider's ID attribute

Type
String
Optional
Yes
jumpOnClick

Does the track react to clicks?

Type
Boolean
Default
true
Optional
Yes

If true, when the user clicks on the slider track the handle will move to that position. Dragging can be initiated from anywhere on the track.

labels

Labels for Slider values.

Type
Object
Optional
Yes

For numerical labels, a Number can be provided for the interval between labels. Text labels can be specified in the form {"value": "label"}, eg {"0": "Min", "50": "Medium", "100": "Maximum"}. Labels may contain HTML, so images could be used.

max

Maximum value for slider.

Type
Number
Default
100
Optional
Yes

Can be negative but must be greater than opts.min.

min

Minimum value for slider.

Type
Number
Default
0
Optional
Yes

Can be negative but must be smaller than opts.max.

onChange

Event shortcut.

Type
Function
Optional
Yes

See documentation below

onSlideStart

Event shortcut.

Type
Function
Optional
Yes

See documentation below

onSlideStop

Event shortcut.

Type
Function
Optional
Yes

See documentation below

size

Pixel width / height of the slider

Type
Number
Default
300
Optional
Yes

The size may be automatically reduced so that stepping sits on absolute pixels.

snapOnDrag

If true, the slide handle will snap to each step during drag.

Type
Boolean
Default
false
Optional
Yes

This is a visual effect, it will not impact the value of the slider.

snapOnDrop

If true, the slide handle will snap to a step position on drop.

Type
Boolean
Default
false
Optional
Yes

This is a visual effect, it will not impact the value of the slider.

step

Step between values.

Type
Number
Default
1
Optional
Yes

0 or fractional step values may result in fractional values.

theme

Visual theme to use.

Type
String
Default
"light"
Optional
Yes

Current themes are "light" and "dark".

tickMajor

The interval between each major tick mark.

Type
Number
Optional
Yes
tickMinor

The interval between each minor tick mark.

Type
Number
Optional
Yes
val

Start value.

Type
Number
Optional
Yes

By default, the value from the bound form element will be used. If none exists, the minimum value will be used.

vertical

Create a vertical slider?

Type
Boolean
Default
false
Optional
Yes

Examples

var mySlider = new glow.widgets.Slider("#sliderContainer", {
  min: 5,
  max: 80,
  id: "ageSlider",
  tickMajor: 5,
  tickMinor: 1,
  labels: 5
});
var mySlider = new glow.widgets.Slider("#fishLevelSlider", {
  bindTo: 'numberOfFishInTheSea',
  buttons: false,
  className: 'deepBlue',
  onSlideStart: function() {
    glow.dom.get('img#fishes').toggleCss('moving');
  },
  onSlideStop: function() {
    glow.dom.get('img#fishes').toggleCss('moving');
  },
  size: '600',
});
var mySlider = new glow.widgets.Slider("#soundLevelHolder", {
  min: 1,
  max: 100,
  id: "soundLevel",
  onChange: function () {
    updateFlash('sound', this.val());
  }
  tickMajor: 10,
  tickMinor: 5,
  labels: 5,
  vertical: true
});

Properties

element

Slider HTML Element.

Type
glow.dom.NodeList

Description

This can be used to perform DOM manipulation on the slider

Example

//get the offset of a slider
mySlider.element.offset();

Methods

disabled

Get / Set the disabled state of the slider

Synopsis

mySlider.disabled(disable);

Parameters

disable
Type
Boolean
Optional
Yes

Disable the slider? 'false' will enable a disabled slider.

Returns

The slider instance when setting. Boolean when getting.

Description

Call without parameters to get the state, call with parameters to set the state.

Disabling the slider will also disable the bound form element.

Example

// disabling a slider
mySlider.disabled( true );

// toggling a slider
mySlider.disabled( !mySlider.disabled() )
labelToVal

Get the value for a particular label.

Synopsis

mySlider.labelToVal(label);

Parameters

label
Type
String
Optional
Yes

A label used in the slider

Returns

Number

Value.

Description

If the label doesn't exist in the slider, null is returned

Example

// find out that value of "Medium" on the slider
var val = mySlider.labelToVal("Medium");
val

Get / Set the value the slider

Synopsis

mySlider.val(newVal);

Parameters

newVal
Type
Number
Optional
Yes

New value for the slider

Returns

The slider instance when setting. Number when getting.

Description

Call without parameters to get the value, call with parameters to set the value.

Example

// getting the current value
var sliderVal = mySlider.val();

// setting the value
mySlider.val(50);
valToLabel

Get the label for a value.

Synopsis

mySlider.valToLabel(val);

Parameters

val
Type
Number
Optional
Yes

The value. If omitted, the current slider value is used.

Returns

String

Label text.

Example

// find out the label the handle is nearest
var label = mySlider.valToLabel();

Events

slideStart

Fired when the user starts moving the slider.

Synopsis

glow.events.addListener(mySlider, "slideStart", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

Fired on both keyboard and mouse interaction. Preventing the default will prevent the user moving the slider.

slideStop

Fired when the user stops moving the slider.

Synopsis

glow.events.addListener(mySlider, "slideStop", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

Fired on both keyboard and mouse interaction. Preventing the default will return the slider to the position it was before the user started dragging.

The event object contains properties 'initialVal' and 'currentVal', which contain the value before dragging and the value about to be set respectively.

change

Fired when the slider value changes.

Synopsis

glow.events.addListener(mySlider, "change", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

This is usually fired when the user drops the handle, but can be configured to fire as the user is dragging the slider, via the 'changeOnDrag' option. Change also occurs when the value in the bound form element is changed by the user.

Change does not fire when the slider's value is set via mySlider.val().

Documentation generated by JsDoc Toolkit 2.1.0 on Mon Jul 20 2009 14:55:32 GMT+0100 (BST)

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.