HTML and CSS Reference
In-Depth Information
this.backBorderColor = "#999999";
this.backWidth = 4;
this.backX = this.width / 2 - this.backWidth / 2;
this.handleColor = "#eeeeee";
this.handleBorderColor = "#cccccc";
this.handleHeight = 6;
this.handleY = 0;
this.updatePosition();
}
Slider.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.fillStyle = this.backColor;
context.beginPath();
context.fillRect(this.backX, 0, this.backWidth, this.height);
context.closePath();
context.strokeStyle = this.handleBorderColor;
context.fillStyle = this.handleColor;
context.beginPath();
context.rect(0, this.handleY, this.width, this.handleHeight);
context.closePath();
context.fill();
context.stroke();
context.restore();
};
Slider.prototype.updateValue = function () {
var old_value = this.value,
handleRange = this.height - this.handleHeight,
valueRange = this.max - this.min;
this.value = (handleRange - this.handleY) / handleRange * valueRange + this.min;
if (typeof this.onchange === 'function' && this.value !== old_value) {
this.onchange();
}
};
Slider.prototype.updatePosition = function () {
var handleRange = this.height - this.handleHeight,
valueRange = this.max - this.min;
this.handleY = handleRange - ((this.value - this.min) / valueRange) * handleRange;
};
Slider.prototype.captureMouse = function (element) {
var self = this,
mouse = utils.captureMouse(element),
bounds = {};
setHandleBounds();
element.addEventListener('mousedown', function () {
Search WWH ::




Custom Search