6

Получил требование создать ползунок выбора диапазона (целые числа 10-25), не прибегая к возможностям jquery и сторонних библиотек. Только чистый JS!.. ну и хардкора немного. Вопрос - что лучше - прибегнуть к варианту создания двух связанных input [type=range] или изучить и сделать при помощи технологии Drag'n'Drop? И тогда вопрос еще касательно первого варианта, т.к. мне кажется, что второй гораздо человековремязатратнее:

как запретить одному из ползунков движение в сторону другого после встречи со вторым в точке?

13
  • "не прибегая к возможностям jquery" - означает вообще без готовых решений или только без jquery? 31 авг 2017 в 0:25
  • @MedvedevDev, и без готовых решений тоже
    – mayst
    31 авг 2017 в 0:28
  • На самом деле, я лично не могу придумать как ты планируешь связать 2 ренж инпута, я бы скорее наоборот из-за большей очевидности выбрал вариант с d'n'd. Что же касается вопроса по тому как "запретить идти дальше", то тоже вопрос интересный, так как change срабатывает только когда ползунок отпущен, то есть вешать на него if(range.value > anotherRange.value) range.value = anotherRange.value; - не получится (работать будет, но достаточно некрасиво), то есть все равно надо отслеживать движение мыши .... 31 авг 2017 в 0:47
  • @MedvedevDev, Мне просто кажется более легким и очевидным как раз таки вариант со связыванием, так как с d'n'd то и не работал. По сути при смене каждого момента "step" изменяется value ползунка. Все, что приходит в голову - сравнивать при каждом изменении value одного ползунка, значения обоих. И переприсваивать значения переменных from и to, соответственно в случае надобности
    – mayst
    31 авг 2017 в 0:54
  • 1
    @MedvedevDev, в том то и суть, что планирую я не возвращать его обратно к пятнадцати, а дотянуть до 25 и там и оставить. И бац, теперь этот ползунок показывает не "от", а "до".. Это даст пользователю право двигать влево-вправо его без стыков со вторым ползунком, типа не баг, а фича. И в этом же случае отпадает постребность явно разделять ползунки на передний и задний, т.к. оба могут выступать в роли обоих
    – mayst
    31 авг 2017 в 1:00

2 ответа 2

0

@MedvedevDev, Спасибо за участие во вчерашнем диалоге - сегодня сделал слайдер при помощи D'n'D - т.к. действительно, так выглядит более безкостыльно на JS. Если кому необходим код слайдера: (ДУмаю, по описанию поймете, какая переменная за что отвечает за какой элемент):

var sliderElem = document.getElementById('range');
var thumbMin = document.getElementById('thumb-min');
var thumbMax = document.getElementById('thumb-max');
// var thumbMin = sliderElem.children[0];
var sliderCoords = getCoords(sliderElem);
var rangeEnd = sliderElem.offsetWidth - thumbMin.offsetWidth;
// var rangeEnd = sliderElem.offsetWidth;

var min = parseInt(getComputedStyle(thumbMin).left);
var max = parseInt(getComputedStyle(thumbMax).left);

console.log(parseInt(min), parseInt(max));
//минимум - 18, максимум - 48

thumbMin.onmousedown = function(e) {
    var thumbCoords = getCoords(thumbMin);
    var shiftX = e.pageX - thumbCoords.left;


    document.onmousemove = function(e) {
        var newLeft = e.pageX - shiftX - sliderCoords.left;

        //если вне слайдера
        if (newLeft < 0) {
            newLeft = 0;
        }

        if (newLeft > max - thumbMin.offsetWidth / 2) {
            newLeft = max - thumbMin.offsetWidth / 2;
        }

        min = newLeft;
        thumbMin.style.left = newLeft + 'px';
    }

    document.onmouseup = function() {
        console.log(getCoords(thumbMin));
        console.log(min);
        document.onmousemove = document.onmouseup = null;
    }

    return false;
};

thumbMax.onmousedown = function(e) {
    var thumbCoords = getCoords(thumbMax);
    var shiftX = e.pageX - thumbCoords.left;

    document.onmousemove = function(e) {
        var newLeft = e.pageX - shiftX - sliderCoords.left;

        //если вне слайдера
        if (newLeft < min + thumbMin.offsetWidth / 2) {
            newLeft = min + thumbMin.offsetWidth / 2;
        }

        if (newLeft > rangeEnd) {
            newLeft = rangeEnd;
        }
        max = newLeft;

        thumbMax.style.left = newLeft + 'px';
    }

    document.onmouseup = function() {
        console.log(getCoords(thumbMax));
        console.log(max);
        document.onmousemove = document.onmouseup = null;
    }

    return false;
};

thumbMin.ondragstart = function() {
    return false;
};

function getCoords(elem) {
    var box = elem.getBoundingClientRect();

    return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
    };
}
1
  • Вы бы отредактировали и сделали ваш код запускающимся, а то иначе он врядли кому-то будет полезен. Если читатели не будут знать - работает ли он в принципе, ни какие элементы во что вложить чтобы он работал как надо. 7 окт 2018 в 21:51
0

На правом ползунке тоже нужно не забыть отключить Drag&Drop:

thumbMax.ondragstart = () => false;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.