Slider (WebFX)

## Implementation

The slider implementation mostly consists of lots of event handlers that sets the value depending on the event arguments.

### Range

The data model is handled by a class called Range (also known as BoundedRangeModel). This class has a few properties that fits perfectly with sliders, scrollbars and progress bars. A range has a minimum value, a value, an extent and a maximum value. The following is always true for a range object.

    minimum < value < value + extent < maximum

In the case of a slider the extent is always zero. Using a range for the data model allows the implementation of the slider to concentrate on other things than ensuring that the data model is valid.

### Timer

For this implementation of the slider I decided to use an object oriented abstraction of `window.setTimeout`. A timer from the `Timer` class can be started and stopped and it fires a pseudo event called `ontimer` a certain amount of milliseconds after the timer is started.

    Timer.prototype.start = function () {
       if (this.isStarted())
          this.stop();
       var oThis = this;
       this._timer = window.setTimeout(function () {
          if (typeof oThis.ontimer == "function")
             oThis.ontimer();
       }, this._pauseTime);
       this._isStarted = false;
    };

    Timer.prototype.stop = function () {
       if (this._timer != null)
          window.clearTimeout(this._timer);
       this._isStarted = false;
    };

### Slider

The slider consists of a line element and a handle element. The line is only there for the visual effect. The handle on the other hand can be dragged and thereby changing the value. When dragging the handle the position of the mouse is used to calculate a new value for the data model. Once the value is changed the layout for the slider is recalculated.

When the user holds down the mouse on the slider, but not on the handle, a timer is started and every time the timer triggers the `timer` event the value is changed by the `blockIncrement` towards the mouse pointer.

The slider also allows the user to use the keyboard to change the value. This is done by listening to the `keydown` (and `keypress`) events. In the `keydown` handler the key is checked and the value for the data model is updated accordingly. The reason for the `keypress` handler is to disable the default actions in the browser.

Slider
Implementation
API
Demo
Download

Author: Erik Arvidsson