Version 1.5 glow.widgets.Slider
API Quick Reference
JavaScript is required to use the quick reference
Form control for setting a numerical value within a range.
glow.onReady() call.Further Info & Examples
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.
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.
- 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.
Events
- slideStart
Fired when the user starts moving the slider.
Synopsis
glow.events.addListener(mySlider, "slideStart", function(event) { // ... });Arguments
- 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
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
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().
