Creating a draggable slider, event issues

Question

I'm trying to build a reusable slider.

I'm having issues with getting this to work correctly.

    function BasicSlider($cont) {
       this.$cont = $cont;
       this.$handle = null;
       this.isMouseDown = false;
       this.width = this.$cont.width();

       this.init();
       }

       BasicSlider.prototype.init = function () {
         this.buildMarkUp();
         this.bindHandlers();
       }

      BasicSlider.prototype.buildMarkUp = function () {
         var markUp = '<div class="basic-slider"><div class="basic-slider-trail"></div><div class="basic-slider-handle"></div></div>';

        this.$cont.html(markUp);
        this.$handle = $('.basic-slider-handle', this.$cont);
     }

       BasicSlider.prototype.bindHandlers = function () {
    var prxDoDrag = $.proxy(function (evt) {
        if (this.isMouseDown) {
            this.$handle.css({'left' : evt.offsetX + 'px'});
        }
    }, this);

    var prxDoMouseDown = $.proxy(function (evt) {
        this.isMouseDown = true;
    }, this);

    var prxDoMouseUp = $.proxy(function (evt) {
        this.isMouseDown = false;
    }, this);

    this.$handle.on('mousedown', prxDoMouseDown);
    this.$handle.on('mouseup', prxDoMouseUp);
    this.$cont.on('mousemove', prxDoDrag);
}

Here's the fiddle: http://jsfiddle.net/8uTVJ/

I cannot use an input[type=range]. I cannot use jqueryUi.

Why is my mouseup not firing?

Answer 1

Very simple slider:

i made this vor a custom video element.but it's so simple that you can change it to whatever you want.

function pos(e){
 var x=e.pageX-r.offsetLeft;
 p.style.width=x+'px';
}

var  vc=document.getElementById('vc'),
     r=document.createElement('div'),
     p=document.createElement('div'),
     mu=true;// mouseup?

r.addEventListener('mousedown',function(e){
 mu=false;
 pos(e);
 e.preventDefault();
 e.stopPropagation()
},false);

r.addEventListener('mousemove',function(e){
 mu||pos(e)
},false);

document.addEventListener('mouseup',function(e){
 mu=true
},false);

vc.appendChild(r).appendChild(p);

Demo

http://jsfiddle.net/LxX34/1/

if you have any questions just ask.

Multiple Slider Plugin

with data-value

using webkitTransform

http://jsfiddle.net/LxX34/7/

& fun init animation

http://jsfiddle.net/LxX34/8/

& default values

http://jsfiddle.net/LxX34/9/