Глючит ползунок, код написал видимо коряво, но где проблема в упор не вижу, код залил на фидл, там тоже можно глюк наблюдать, поможете?

Question

[_ umr]

У меня есть ползунок и он глючит вот так:
https://www.youtube.com/watch?v=eVXTafDkW7w
Все это дело находится в div высотой 50 пикселей и шириной 200. У меня есть кусок кода, который возвращает ползунок в исходное положение если курсор выходит за пределы этого div. И вот когда я просто дергаю этот ползунок он работает нормально, но после того как я зажму ползунок начну его вести и выйду за пределы этого div, то начинает проявляется этот глюк.
Я перенес код в жеес фидл и там тоже наблюдается этот глюк https://jsfiddle.net/8tq2tngu/ попробуй зажать ползунок и водите им просто так водя ровно по линии, проблем нет, а потом попробуй зажать ползунок чуть чуть поводить и не отпуская потянуть мышку вниз, отпустите и попробуйте поюзать ползунок опять
Нид хелп

Comments

[Kovalsky]

Как-то ползунок странно себя ведет в окрестности кружка справа. Его даже можно выкинуть)

1. Гляньте в консоль, когда двигаете ползунок,
2. А в чем соль добавления listener'ов по каждому клику на .fc ? Я вот об этом :

$(".fc").on("mousedown", function() {
    isDown = true;
    
    $(".path-container").mousemove(function(e) {
     ...
    });
})

[_ umr]

Никита Полевой: консоль чиста. Ну смотрите маусдовн, то есть зажатая клавижа мыши, пока зажата двигаем, отпускаем мышь - возвращаем ползунок в исходное состояние, то есть в левый край.

[_ umr]

Никита Полевой: в окрестностях кружка справа он должен себя так вести. Это я прописал, чтобы он останавливался там

[Kovalsky]

_ umr: когда шарик выкидываешь вправо, выскакивает ошибка в консоли.

Ну да, но дело в том, что вы на каждый mousedown вешаете listener на .path-container, т.к. этот кусок кода внутри функции, которая выполняется на mousedown по .fc

Answer 1

[Ridz]

$(function() {
    var isDown;
    $(".fc").on("mousedown", function(e) {
        e.preventDefault();
        isDown = true
    });
    var offset = $(".path-container").offset();
    var width = $(".border-path").width();
    $(".path-container").mousemove(function(e) {

        if (isDown) {
            var left = e.pageX - offset.left - $(".fc").width() * 1.5;
            var bleft = left + $(".fc").width();
            var w = width - bleft - 4;
            if (w > 0) {
                $(".fc").css({
                    "left": left
                });
                $(".border-path").css({
                    "left": bleft,
                    "width": w
                })
            }
        }
    }).on("mouseup mouseleave", function() {
        $(".fc").stop(true, true).animate({
            "left": "-46px"
        });
        $(".border-path").stop(true,
            true).animate({
            "left": 0,
            "width": "100%"
        });
        isDown = false
    })
});