How to stop the Knob movement while moving cursor?

Question

In my app, user(student) logins to application by just sliding the knob to right side and CLICKS, user's status switches from absent to present. It works fine on tablets. But using laptops/desktops,when student moves knob to right side with cursor, it gets attach with cursor, i mean if user moves cursor back to left side, knob moves too, without clicking on it. I want to fix that problem in the sense that when user move the knob right and clicks, it should marks present and automatically shift to its previous (left)position, rather than to chase the cursor!

Code

$(function() {
    var e = 2;
    $(".slider").each(function() {

        function u() {
            o.css({
                "-webkit-transform": "translateZ(0)",
                "-webkit-transition": "opacity 0.25s",
                "-webkit-animation": "textani 2s linear infinite forwards",
                opacity: 1
            })
        }

        function a() {
            o.css({
                "-webkit-transition": "none",
                "-webkit-animation": "none"
            })
        }

        function f(e) {
            i.css({
                "-webkit-transition": "none"
            });
            t = e
        }

        function l(n) {
            var r = Math.max(n - t, 0);
            if (r + i.width() > s.width()) {
                r = s.width() - i.width() - e * 2
            }
            var f = Math.max(80 - r, 0) / 80;
            if (f > 0) {
                a()
            } else {
                u()
            }
            i.css({
                left: r + e
            });
            o.css({
                opacity: f
            });
        }


        function c(t) {

            function o() {
                i.css({
                    "-webkit-transform": "translateZ(0)",
                    "-webkit-transition": "left 0.25s cubic-bezier(0.5, 0.1, 0.7, 1.5)",
                    left: e
                });
                u();
            }

            var n = parseInt(i.css("left")) / (s.width() - i.width() + e);
            if (n > .95) {
                changeStatus();

                //  var a = r.attr("href");
                //  window.location = a;
                setTimeout(o, 250)
            } else {
                o()
            }
        }

        var t, n;
        var r = $(this);
        var i = $(this).children(".knob");
        var s = $(this).children(".track");
        var o = $(this).children(".text");
        i.bind("touchstart", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            f(oev.touches[0].pageX);
        });
        i.bind("touchmove", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            l(oev.touches[0].pageX);
        });
        i.bind("touchend", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            c(0);
        });
        i.bind("mousedown", function(e) {
            f(e.screenX);
            $(document).bind("mousemove.knob", function(e) {
                l(e.screenX);
                return false;
            });
            $(document).bind("mouseup.knob", function(e) {
                c(0);

            });
            return false;
        });
    });
});

Answer 1

I just added a new line of code that just unbound the mouseover event and its working fine :

i.bind("mousedown", function(e) {
            f(e.screenX);
            $(document).bind("mousemove.knob", function(e) {
                l(e.screenX);
                return false;
            });
            $(document).bind("mouseup.knob", function(e) {
                $(document).unbind("mousemove.knob");  //   this line
                c(0);
                $(document).unbind(".knob");   
             });
            return false;
        });