³ÉÈËÂÛ̳

Constructor

new glow.widgets.Slider(container, opts)

Parameters

container

Type

glow.dom.NodeList | Selector |

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

opts

Type

Optional

Yes

Options object

bindTo

Form element to bind value to.

Type

glow.dom.NodeList | Selector |

Optional

Yes

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

buttons

Include fine-tuning buttons?

Type

Default

true

Optional

Yes

changeOnDrag

Fire the 'change' event during drag.

Type

Default

false

Optional

Yes

className

Values for Slider's class attribute.

Type

Optional

Yes

Space separated values.

id

Value for Slider's ID attribute

Type

Optional

Yes

jumpOnClick

Does the track react to clicks?

Type

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

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

Default

100

Optional

Yes

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

min

Minimum value for slider.

Type

Default

0

Optional

Yes

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

onChange

Event shortcut.

Type

Optional

Yes

See documentation below

onSlideStart

Event shortcut.

Type

Optional

Yes

See documentation below

onSlideStop

Event shortcut.

Type

Optional

Yes

See documentation below

size

Pixel width / height of the slider

Type

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

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

Default

false

Optional

Yes

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

step

Step between values.

Type

Default

1

Optional

Yes

0 or fractional step values may result in fractional values.

theme

Visual theme to use.

Type

Default

"light"

Optional

Yes

Current themes are "light" and "dark".

tickMajor

The interval between each major tick mark.

Type

Optional

Yes

tickMinor

The interval between each minor tick mark.

Type

Optional

Yes

val

Start value.

Type

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

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

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

Optional

Yes

A label used in the slider

Returns

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

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

Optional

Yes

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

Returns

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().