jQuery draggable как реализовать шкалу?

Здравствуйте! Пытаюсь реализовать шкалу на которой отображаются несколько колонок в ряд и эти колонки могут выходить за рамки видимого контейнера. Задача состоит в том чтобы перетаскивать эту шкалу вправо и влево (до тех пор пока есть что показывать) чтобы просмотреть скрытые колонки, а также останавливать перетаскивание этой шкалы если слева или справа нету больше колонок и область соответственно пустая.

Пытался реализовать таким способом:

$('.leads_graph_container .leads_graph_viewport').draggable({
    axis: 'x',
    drag: function(event, ui) {
        var aviable_width = $(this).outerWidth(),
        current_left_position = ui.position.left;
        if (current_left_position > 0) {
            $(this).css('left', '0px');
            event.preventDefault();
        }
        if (current_left_position != 0 && (current_left_position * -1) > (aviable_width - leads_column_width) - $(this).closest('.leads_graph_container').outerWidth()) {
            event.preventDefault();
            var container_width = $(this).closest('.leads_graph_container').outerWidth();
            $(this).css('left', container_width - aviable_width - (-leads_column_width)+'px');
        } 

    }
});

Но при некоторых разрешениях экрана колонки начинают резко прыгать по своим позициям то влево то вправо а не перемещаться плавно + не всегда показывает последнюю колонку.