MODULES Uize.Widget.Bar.Slider
SEARCHEXAMPLESSOURCETEST

1. Introduction

The Uize.Widget.Bar.Slider class implements a slider widget that lets the user select a value by clicking-and-dragging the slider knob along a track.

DEVELOPERS: Chris van Rensburg

With the Uize.Widget.Bar superclass, the knob implied node acts purely as a value indicator, but with the Uize.Widget.Bar.Slider class, the knob is draggable by the user.

1.1. Examples

The following example pages are good showcases for the Uize.Widget.Bar.Slider module...

Basic Slider - See a very basic example of a slider widget that lets you select a value in the range of 0 to 200, with a display of the currently selected value.
Characters Used Indicator - Among the creative uses of the bar widget is this characters used indicator for a textarea. As you type, the bar indicates chars used and remaining.
Multiple Sliders From a Template - See how to supply your own HTML template for widgets. Seven sliders in a row - all using the same HTML, but each with its own unique configuration.
Sliders as RGB Selectors - Get three sliders in the same room together and you've got yourself an RGB color selector. See how to get sliders to cooperate for the greater good.
Sliders in a Color Blender - Three sliders for one RGB color selector. Three sliders for another. One slider to blend between the colors. Three sliders to show the blended color.
The Built-in Slider Skin - A basic preset skin is provided for the slider widget that is customizable with various parameters. This demo shows a few variations using this skin.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Widget.Bar.Slider module...

SEARCH

1.2. Implementation Info

The Uize.Widget.Bar.Slider module defines the Uize.Widget.Bar.Slider class, which is a subclass of Uize.Widget.Bar.

INHERITANCE CHAIN

Uize.Class -> Uize.Widget -> Uize.Widget.Bar -> Uize.Widget.Bar.Slider

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

STATE PROPERTIES

inDrag | restTime | valueFunc

1.2.2. Features Overridden in This Module

The features listed in this section have been overridden in this module.

The module that an overridden feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

wireUi

STATIC PROPERTIES

Uize.Widget.Bar.Slider.moduleName | Uize.Widget.Bar.Slider.nonInheritableStatics | Uize.Widget.Bar.Slider.presets

1.2.3. Features Inherited From Other Modules

The features listed in this section have been inherited from other modules.

The module that an inherited feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

addChild | ajax | buildHtml | callInherited | confirm | displayNode | fire | flushNodeCache | get | getInherited | getNode | getNodeStyle | getNodeValue | getProvider | globalizeNode | inform | injectNodeHtml | insertOrWireUi | insertUi | is | kill | localize | met | once | removeChild | removeNode | removeUi | set | setInherited | setNodeClipRect | setNodeInnerHtml | setNodeOpacity | setNodeProperties | setNodeStyle | setNodeValue | showNode | toggle | unmet | unwire | unwireNode | unwireNodeEventsByMatch | unwireUi | updateUi | wire | wireNode

INSTANCE PROPERTIES

showConfirm | showInform

STATE PROPERTIES

built | busy | busyInherited | children | container | decimalPlacesToDisplay | enabled | enabledInherited | html | idPrefix | idPrefixConstruction | increments | insertionMode | localized | maxValidValue | maxValue | minValidValue | minValue | name | nodeMap | orientation | scaleFunc | value | wired

STATIC METHODS

Uize.Widget.Bar.Slider.fire | Uize.Widget.Bar.Slider.get | Uize.Widget.Bar.Slider.getBlankImageUrl | Uize.Widget.Bar.Slider.registerProperties | Uize.Widget.Bar.Slider.set | Uize.Widget.Bar.Slider.singleton | Uize.Widget.Bar.Slider.spawn | Uize.Widget.Bar.Slider.subclass | Uize.Widget.Bar.Slider.toggle | Uize.Widget.Bar.Slider.unwire | Uize.Widget.Bar.Slider.wire

STATIC PROPERTIES

Uize.Widget.Bar.Slider.isWired

1.2.4. Modules Directly Under This Namespace

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Widget.Bar.Slider module.

2. Instance Events

2.1. Value Change After Rest

The Value Change After Rest event is similar to the Changed.value event, except that it is only fired during drag if the slider's knob has rested on the same value for the amount of time specified by the restTime state property.

When a slider is not in drag mode, then the Value Change After Rest event fires every time the Changed.value event fires. The Value Change After Rest event also fires immediately upon releasing the slider's knob if the value has changed since the previous firing of the event (a user may in some cases release a knob after resting it for long enough to have this event fire, in which case this event will not fire again upon release).

This event is useful when wiring up sliders to drive updates that might be costly, such as complex changes to the DOM or updates that require requests to a server. In these cases, wiring into the Value Change After Rest event lets you conveniently tune how rapid-fire the costly updates are.

3. State Properties

3.1. built

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.2. busy

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.3. busyInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.4. children

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.5. container

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.6. decimalPlacesToDisplay

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.7. enabled

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.8. enabledInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.9. html

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.10. idPrefix

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.11. idPrefixConstruction

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.12. inDrag

A boolean value, indicating whether or not the slider's knob is being dragged by the user.

To monitor when a slider is being dragged, one can register an event handler on the Changed.inDrag instance event.

NOTES

the initial value is false
this property is read-only

IMPLEMENTATION INFO

this feature was introduced in this module

3.13. increments

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.14. insertionMode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.15. localized

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.16. maxValidValue

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.17. maxValue

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.18. minValidValue

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.19. minValue

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.20. name

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.21. nodeMap

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.22. orientation

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.23. restTime

An integer, representing the time (in milliseconds) that the user must rest the mouse - during dragging the slider's knob - before the Value Change After Rest instance event will be fired.

Using this property in conjunction with the Value Change After Rest instance event is useful in triggering updates that would be too expensive to trigger continuously during a drag operation.

NOTES

the initial value is 250

IMPLEMENTATION INFO

this feature was introduced in this module

3.24. scaleFunc

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.25. value

Inherited from Uize.Widget.Bar.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget.Bar)

3.26. valueFunc

An optional function that can be provided to achieve a non-linear transformation of the slider's knob position to a value for the instance's value state property.

This property should be used in conjunction with the scaleFunc state property. In order for the slider to operate sensibly, any function specified for this property should be the inverse of a function specified for the scaleFunc property. For example, if the function function (unscaled) {return Math.pow (unscaled)} was specified for the scaleFunc property, then the function function (scaled) {return Math.sqrt (scaled)} should be specified for the valueFunc property.

NOTES

the initial value is a function that has no effect

IMPLEMENTATION INFO

this feature was introduced in this module

3.27. wired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4. Instance Methods

4.1. addChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.2. ajax

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.3. buildHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.4. callInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.5. confirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.6. displayNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.7. fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.8. flushNodeCache

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.9. get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.10. getInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.11. getNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.12. getNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.13. getNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.14. getProvider

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.15. globalizeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.16. inform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.17. injectNodeHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.18. insertOrWireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.19. insertUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.20. is

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.21. kill

Inherited from Uize.Widget, but introduced in Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Class)

4.22. localize

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.23. met

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.24. once

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.25. removeChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.26. removeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.27. removeUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.28. set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.29. setInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.30. setNodeClipRect

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.31. setNodeInnerHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.32. setNodeOpacity

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.33. setNodeProperties

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.34. setNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.35. setNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.36. showNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.37. toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.38. unmet

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.39. unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.40. unwireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.41. unwireNodeEventsByMatch

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.42. unwireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.43. updateUi

Inherited from Uize.Widget.Bar, but introduced in Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget.Bar, first introduced in Uize.Widget)

4.44. wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.45. wireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.46. wireUi

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)

5. Instance Properties

5.1. showConfirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.2. showInform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

6. Static Methods

6.1. Uize.Widget.Bar.Slider.fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.2. Uize.Widget.Bar.Slider.get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.3. Uize.Widget.Bar.Slider.getBlankImageUrl

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.4. Uize.Widget.Bar.Slider.registerProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.5. Uize.Widget.Bar.Slider.set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.6. Uize.Widget.Bar.Slider.singleton

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.7. Uize.Widget.Bar.Slider.spawn

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.8. Uize.Widget.Bar.Slider.subclass

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.9. Uize.Widget.Bar.Slider.toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.10. Uize.Widget.Bar.Slider.unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.11. Uize.Widget.Bar.Slider.wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

7. Static Properties

7.1. Uize.Widget.Bar.Slider.isWired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.2. Uize.Widget.Bar.Slider.moduleName

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is inherited by subclasses

7.3. Uize.Widget.Bar.Slider.nonInheritableStatics

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is not inherited by subclasses

7.4. Uize.Widget.Bar.Slider.presets

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget.Bar)
this static feature is inherited by subclasses