Различные шаги при щелчке элементов диапазона по сравнению с перетаскиванием их - PullRequest
Новая
       5

Различные шаги при щелчке элементов диапазона по сравнению с перетаскиванием их

0 голосов
/ 30 июня 2018

Я хочу указать разные шаги для нажатия элементов диапазона. Должна быть предусмотрена возможность перетаскивания ползунка к любому значению по умолчанию, но только для достижения определенных значений можно щелкнуть, например, «30» и «70». Если пользователь нажимает на какое-либо значение на треке диапазона, он должен автоматически оказаться на уровне «30» или «70», в зависимости от того, где он щелкнул (ближе к 30 или 70). Есть ли способ реализовать что-то подобное с помощью HTML или Javascript? Мне удалось сделать что-то похожее как для кликов, так и для перетаскивания, используя следующий код: 

<input id="slider" type="range" value="0" min="0" max="100" step="30">

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 30 июня 2018

Вы можете реализовать это с помощью обработчиков событий. Так как перетаскивание мышью и щелчки посылают одни и те же события, вы можете различить их, проверив изменения положения мыши между событиями. 

<body>
    <input id="slider" type="range" value="0" min="0" max="100"/>
</body>
<script>
    // Keep track of coordinates on mouse down event
    var x = 0, y = 0;

    // Avoid adjusting value from slight mouse movement on click
    var delta = 5;

    function savePosition(e) {
        x = e.pageX;
        y = e.pageY;
    };

    function adjust(e) {
        if (Math.abs(x - e.pageX) > delta || Math.abs(y - e.pageY) > delta) {
            // Drag detected: Keep current value
            return;
        }

        // Click detected
        var newValue = 30;
        if (e.target.value > 50) {
            newValue = 70;
        }
        e.target.value = newValue;
    };

    var el = document.getElementById('slider');
    el.addEventListener('mousedown', savePosition);
    el.addEventListener('mouseup', adjust);
    el.addEventListener('click', adjust);
    el = undefined;

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...