jquery ui draggable пытаюсь сделать ползунок для выбора диапазона

Question

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

Вопрос в том, как сделать что бы при касании нельзя было двигаться только вперед, а назад можно. И вообще может есть какие то альтернативы для реализации данного функционала?

Сейчас это выглядит вот так

html

<div class="range-picker">
  <div class="left-picker"></div>
  <div class="right-picker"></div>
</div>

css

.range-picker {
    background-image: url('../Content/Images/line.png');
    height: 20px;
    margin: 10px 0;
}

.left-picker, .right-picker {
    display: inline-block;
    background-color: black; 
    width: 20px; 
    height: 20px;
    border-radius: 100%;
}

.left-picker {
    float: left;
}

.right-picker {
    float: right;
}

java script

$('.left-picker, .right-picker').draggable({
    axis: "x",
    containment: 'parent',
    drag: function (event, ui) {
        if ($(this).hasClass('left-picker')) { // если двигаем левый ползунок
            if (ui.offset.left + 19 >= $(this).parent().children('.right-picker').offset().left) {
                return false;
            }
        }

        if ($(this).hasClass('right-picker')) { // если двигаем правый ползунок
            if (ui.offset.left - 19 <= $(this).parent().children('.left-picker').offset().left) {
                return false;
            }
        }
    }
});