0

Посоветуйте плагин (желательно на чистом js) который позволяет создать ползунок с точками, расположенными на разном расстоянии друг от друга. Вот как на рисунке ниже.

введите сюда описание изображения

1 ответ 1

3

Не думаю что вам нужен какой-то плагин. Подобный ползунок можно реализовать с помощью <input type="range">, <datalist> и немного js.
В datalist внесите необходимые значения, а js не позволит выбрать значения, которых нет в datalist.

Подробнее о <input type="range"> можете прочитать здесь.

var input = document.querySelector('input');
var values = Array.from(input.list.options).map(o => o.value);
var prevValue = input.value;
input.addEventListener('input', function () {
    if (!values.includes(this.value)) {
        var index = values.findIndex(v => Number(v) > Number(this.value));
        if (Number(this.value) < Number(prevValue)) {
            index--;
        }
        this.value = values[index];
    }
    prevValue = this.value;
});
<input type="range" list="tickmarks" value="0" step="1">
<datalist id="tickmarks">
  <option value="0"/>
  <option value="20"/>
  <option value="77"/>
  <option value="100"/>
</datalist>

9
  • Вот только данное решение работает криво даже с JS. В даталисте указанно 4 "засечки", а ползунок проходит 6.
    – De.Minov
    11 янв 2019 в 13:57
  • @CbIPoK2513 Ползунок проходит 6 засечек, но выбрать можно только 4.
    – Volodymyr
    11 янв 2019 в 14:32
  • @Vladimir Ваше решение интересное, и симпатично мне. Но ползунок не перескакивает с 20 на 80 как необходимо
    – Flap Jack
    11 янв 2019 в 17:03
  • 1
    @Vladimir у Вас вполне рабочее решение, только замените событие onChange на onInput - должно перестать фиксировать промежуточные положения.
    – UModeL
    12 янв 2019 в 7:33
  • @UModeL да, спасибо, исправил ответ
    – Volodymyr
    12 янв 2019 в 8:56

Ваш ответ

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

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