The slider implementation mostly consists of lots of event handlers that sets the value depending on the event arguments.
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.
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;
};
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.