Можно ли сделать слайдер HTML5 с двумя входными значениями, например, для выбора диапазона цен? Если да, то как это можно сделать?
102
Нет, вход диапазона HTML5 принимает только один вход. Я бы порекомендовал вам использовать что-то вроде слайдера диапазона пользовательского интерфейса jQuery для этой задачи.
Некоторое время я искал легкий, свободный от зависимостей двойной слайдер (казалось безумием импортировать jQuery только для этого), и, похоже, их не так много. В итоге я немного изменил код @ Wildhoney, и он мне очень понравился.
Показать фрагмент кода
источник
Приходит поздно, но noUiSlider позволяет избежать зависимости jQuery-ui, чего нет в принятом ответе. Единственное «предостережение» - поддержка IE для IE9 и новее, если устаревший IE мешает вам.
Он также бесплатный, с открытым исходным кодом и может использоваться в коммерческих проектах без ограничений.
Установка: Загрузите noUiSlider, извлеките файл CSS и JS в файловую систему вашего сайта, а затем создайте ссылку на CSS из головы и на JS из тела:
Пример использования: Создает ползунок от 0 до 100, начиная с 20-80.
HTML:
JS:
источник
Конечно, вы можете просто использовать два ползунка, накладывающиеся друг на друга, и добавить немного javascript (на самом деле не более 5 строк), чтобы селекторы не превышали минимальные / максимальные значения (как в @Garys).
В приложении вы найдете короткий фрагмент, адаптированный из текущего проекта, включая некоторые стили CSS3, чтобы показать, что вы можете делать (только для webkit). Я также добавил несколько меток для отображения выбранных значений.
Он использует JQuery, но версия vanillajs не волшебна.
источник
На самом деле я использовал свой скрипт непосредственно в html. Но в javascript, когда вы добавляете прослушиватель событий oninput для этого события, он автоматически выдает данные. Вам просто нужно присвоить значение в соответствии с вашими требованиями.
источник