Question

I have the following function to create a slider. It works (almost perfectly)… The problem I’m having now is that once you click down on the slider it moves around like it should, but I can’t figure out how to stop it from moving when I release the mouse?

Suggestions?
Thanks!

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);

        //tracks the mosemovement in the document
        $(document).mousemove(function(e){
            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 400){
                $('#slider').css('left', 400-20 + "px");    
            }
        });
    });

    $("#slider").mouseup(function(){
        $('#slider').css('left', currentPosition + "px")
            console.log("Fixed");

    });

};

EDIT:
MVCHR, I went off your example, and came up with the following. The mouse move still works, but when you release the mouse it keeps moving. Im sure I”m missing something stupid

Edit, again: Silly mistake, I still had the mouse move in there. Took it out and it works perfectly now! Thanks 🙂

Thanks again

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            //tracks the mosemovement in the document
            $(document).mousemove(function(e){
                currentPosition = e.pageX - offset;

                //takes the mouse current position (minues the offset) and sets an absolute position
                $('#slider').css('left', currentPosition + "px");
                console.log("CURRENT POSITION: " + currentPosition);

                //checks to make sure it's within the box
                if(currentPosition <= 0){
                    $('#slider').css('left', 0 + "px");
                }else if(currentPosition >= 400){
                    $('#slider').css('left', 400-20 + "px");    
                }
            });
        };


    $(document).mouseup(function(e) {
      // some code then
      $(document).unbind('mousemove', mmHandler);
    });


};

Answer 1

In your mouse up event handler add in:

$(document).unbind('mousemove');

You should probably put the function for handling the bound mouse move into something you can pass to the unbind because the code above will affect all mousemove handlers on the document that may be set.

unbind api docs