UIZE JavaScript Framework

MODULES Uize.Widget.Bar.mSlider

1. Introduction

The Uize.Widget.Bar.mSlider module implements a mixin that lets you mix in knob drag-and-drop functionality into bar widget classes to produce slider widget classes.

DEVELOPERS: Chris van Rensburg

1.1. Examples

There are no dedicated showcase example pages for the Uize.Widget.Bar.mSlider module.


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


1.2. Implementation Info

The Uize.Widget.Bar.mSlider module defines the Uize.Widget.Bar.mSlider object under the Uize.Widget.Bar namespace.

1.2.1. Features Introduced in This Module

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


Uize.Widget.Bar.mSlider.moduleName | Uize.Widget.Bar.mSlider.pathToResources

1.2.2. Features Overridden in This Module

No features have been overridden in this module.

1.2.3. Features Inherited From Other Modules

This module has no inherited features.

1.2.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Widget.Bar.mSlider 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. 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.


the initial value is false
this property is read-only

3.2. 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.


the initial value is 250

3.3. 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.


the initial value is a function that has no effect

4. Static Properties

4.1. Uize.Widget.Bar.mSlider.moduleName


this feature was introduced in this module

4.2. Uize.Widget.Bar.mSlider.pathToResources


this feature was introduced in this module