function Slider(container, min, max, step, value, lineColor, dotColor, bgColor) {
	var slider = document.createElement("canvas");
	var sliderContext = slider.getContext("2d");
	var length = max-min;
	var widthOffset = length;
	var heightOffset = length;
	
	slider.width = length*step+widthOffset;
	slider.height = length+heightOffset;
	value = length/2;
	container.appendChild(slider);
	var mouseDown = false;
	var lastMove;
	draw();
	
	this.getValue = function() {
		return value;
	}
	
	function draw() {
		sliderContext.fillStyle = bgColor;
		sliderContext.fillRect(0, 0, slider.width, slider.height);
		sliderContext.beginPath();
		sliderContext.moveTo(widthOffset/2, slider.height/2);
	    sliderContext.lineTo(slider.width-widthOffset/2, slider.height-heightOffset/2);
		sliderContext.lineTo(slider.width-widthOffset/2, heightOffset/2);
		sliderContext.lineTo(widthOffset/2, slider.height/2);
	    sliderContext.lineWidth = 1;
	    sliderContext.fillStyle = lineColor;
		sliderContext.fill();
		sliderContext.closePath();
		
		sliderContext.beginPath();
		sliderContext.fillStyle = dotColor;
		sliderContext.arc(widthOffset/2 + (value - min) * step, slider.height/2, (value - min)/2, 0, Math.PI*2, true);
		sliderContext.fill();
		sliderContext.closePath();

	}
	
	slider.onmousedown = function() { 
		mouseDown = true; 
		slider.onmousemove(lastMove); 
	}
	
	slider.onmouseup = slider.onblur = function() { 
		mouseDown = false; 
	}
	
	slider.onmousemove = function(e) { 
		lastMove = e;
		if (!mouseDown) return;
		var posX = e.pageX - this.offsetLeft;
		value = (posX-widthOffset/2) / step;
		if (value < min) {
			value = min;
		} else if (value > max) {
			value = max;
		}
		draw();
	}
	
}