html5 graph slider,javascript

Trying to create a slider class that lets you easily and quickly customize values. You can drag the handle or click on any part of the slider to move the handle there, and it works... sort of. You can click as many times as you want, but... if you even click once or if you drag, then let go and try again, it only goes down (never up) a tiny bit. That probably sounds confusing, so here's the fiddle.

var Slider = createEntity({

init: function (args) {

args = args || {};

this.x = args.x || 0;

this.y = args.y || 0;

this.width = args.width || 10;

this.height = args.height || 100;

this.min = args.min || 0;

this.max = args.max || 100;

this.value = args.value || 50;

this.rotation = args.rotation || 0;

this.on = args.on || function () {};

var backFill = randHsla();

args.back = args.back || {};

this.back = args.back;

args.back.fill = args.back.fill || backFill;

this.back.fill = args.back.fill;

args.back.borderFill = args.back.borderFill || backFill;

this.back.borderFill = args.back.borderFill;

args.back.width = args.back.width || 5;

this.back.width = args.back.width;

args.back.x = args.back.x || this.width / 2 - this.back.width / 2;

this.back.x = args.back.x;

var handleColor = randHsla();

args.handle = args.handle || {};

this.handle = args.handle;

args.handle.fill = args.handle.fill || handleColor;

this.handle.fill = args.handle.fill;

args.handle.borderStroke = args.handle.borderStroke || handleColor;

this.handle.borderStroke = args.handle.borderStroke;

args.handle.height = args.handle.height || 5;

this.handle.height = args.handle.height;

args.handle.y = args.handle.y || 0;

this.handle.y = args.handle.y;

this.updatePos();

},

draw: function (fx) {

fx.save();

fx.translate(this.x, this.y);

fx.rotate(this.rotation);

fx.fillStyle = this.back.fill;

fx.beginPath();

fx.fillRect(this.back.x, 0, this.back.width, this.height);

fx.closePath();

fx.fillStyle = this.handle.fill;

fx.strokeStyle = this.handle.borderStroke;

fx.beginPath();

fx.rect(0, this.handle.y, this.width, this.handle.height);

fx.closePath();

fx.fill();

fx.stroke();

fx.restore();

},

updateVal: function () {

var oldVal = this.value,

handleRange = this.height - this.handle.height,

valRange = this.max - this.min;

this.value = (handleRange - this.handle.y) / handleRange * valRange + this.min;

if (this.on instanceof Function && this.value !== oldVal) {

this.on();

}

return this;

},

updatePos: function () {

var handleRange = this.height - this.handle.height,

valRange = this.max - this.min;

this.handle.y = handleRange - ((this.value - this.min) / valRange) * handleRange;

return this;

},

getMouse: function (map) {

var self = this,

mouse = getMouse(map),

bounds = {};

setBounds();

map.addEventListener('mousedown', function (event) {

if (hasPoint(bounds, mouse.x, mouse.y)) {

map.addEventListener('mousemove', onMouseMove);

map.addEventListener('mouseup', onMouseUp);

} else if (hasPoint(self, mouse.x, mouse.y)) {

var y = mouse.y - self.y;

self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));

self.updateVal();

}

});

function onMouseUp(event) {

map.removeEventListener('mousemove', onMouseMove, false);

map.removeEventListener('mouseup', onMouseUp, false);

}

function onMouseMove(event) {

var y = mouse.y - self.y;

self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));

self.updateVal();

}

function setBounds() {

bounds.x = self.x;

bounds.y = self.y + self.handle.y;

bounds.width = self.width;

bounds.height = self.handle.height;

}

return this;

}

});

External functions such as createEntity and hasPoint can be found here.

How would I make it work after clicking the slider and letting go after the first?