При верстке какого-нибудь магазина часто приходится сталкиваться с задачей реализовать удобный для пользователя выбор ценового диапазона. Выглядеть это может, например, так:
Идея, надеюсь, понятна. Перетягиваем ползунки, значения полей синхронно меняются. Попробуем это реализовать.
ЗадачаОтыскать кроссбраузерное решение на js для интерфейса выбора диапазона. Требования:
- инпуты и ползунки связанны (изменение значения одних тут же отражается на других);
- гибкость стилизации (все должно выглядеть по дизайну).
Будем использовать плагин jQuery UI Slider. Сам по себе он просто создает ползунок, но подружить его с инпутами не составит труда.
Проверено в:
- IE 6-8
- Firefox 4
- Opera 11
- Safari
- Chrome
Итак, вначале давай представим, что инпутов нет, и посмотрим, как работает сам плагин.
Что качать?- (24.33 Kb) ядро UI + сам слайдер.
Подключаем библиотеки:
Инициализируем ползунок скриптом:
jQuery("#slider").slider({ min: 0, max: 1000, values: , range: true });
А теперь подробнееПлагин достаточно гибкий. Позволяет создавать вертикальные или горизонтальные треки по которым может ходить один или два ползунка. Вариант с двумя ползунками как раз идеально подойдет для нашей задачи — выбора диапазона.
В момент перемещения ползунка или его остановки можно выполнять какую-то функцию, благодаря чему ползунок можно использовать как элемент управления (изменять значения инпутов, селектов, или, например, переключать вкладки — на официальном сайте плагина есть и такой демо-пример).
НастройкиПри инициализации плагина можно задать его параметры:
| Отключает (true) или включает (false) слайдер. | boolean | false |
| Определяет, будет ли ползунок передвигаться в точку плавно, когда пользоваль щелкает на точку на полосе. Также может принимать значение string представляющая одну из трех скоростей на выбор ("slow", "normal", или "fast") или число миллисекунд, определяющее продолжительность анимации (например, 1000). | boolean, string, int | false |
| Максимальное значение слайдера. | Number | 100 |
| Минимальное значение слайдера. | Number | 0 |
| Определяет ориентацию шкалы: слева направо или снизу вверх. Возможные значения: "horizontal", "vertical". | String | horizontal |
| Если выставлено в true, на слайдере будет двуа ползунка и диапазон между ними, который можно стилизовать. Два других значения это "min" и "max". Значение "min" создает диапазон от минимума шкалы до ползунка. Значение "max" создает диапазон от ползунка до максимума шкалы. | boolean, string | false |
| Определяет шаг слайдера. Полный диапазон шкалы (max − min) должен равномерно делится на шаг. | Number | 1 |
| Определяет значение слайдера, если есть только однин ползунок. Если имеется более одного ползунка, определяет значение первого ползунка. | Number | 0 |
| Эта опция может использоваться для указания нескольких ползунков. Если range имеет значение true, значений "values" должно быть 2. | Array | null |
События — это функции, которые будут выполняться в определенные моменты жизни ползунка. Задавать их можно при инициализации. Например:
JQuery("#slider").slider({ stop: function(event, ui) { alert("Ползунок переехал на новую позицию!"); } });
Перечень событий:
| Событие возникает в момент создания ползунка |
| Событие возникает в момент, когда пользователь начинает двигать ползунок. |
| Событие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider("value", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками. |
| Событие происходит при остановке прокрутки или если величина изменяется программным способом (посредством метода value). Принимает аргументы event и ui. Используйте event.orginalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(this).slider("values", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками. |
| Событие возникает в момент, когда пользователь закончил двигать ползунок. |
Вызов этих функций позволяет повлиять на работу ползунка, налету изменив его параметры. Делается это с помощью конструкции.slider(), например вот так:
JQuery("#slider").slider("values",0, 100);
Перечень методов:
| Удаляет функционал ползунка, возвращая элемент к первоначальному состоянию. |
| Отключает слайдер. |
| Включает слайдер. |
| Получает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider("option", optionName , ) |
| Устанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider("option", options) |
| Возвращает элемент.ui-slider. |
| Устанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком. |
| Устанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном. |
Вообще-то стилизация элементов jQuery UI (одним из которых является данный слайдер) происходит путем выбора понравившейся темы и загрузки с официального сайта готового CSS. Лично меня такой подход не устраивает совершенно. Поэтому я выбрал из ихнего (очень избыточного, если использовать только слайдер) CSS только нужный код, который здесь и привожу с комментариями.
/* Ширина слайдера */ #slider { width: 200px; } /* Контейнер слайдера */ .ui-slider { position: relative; } /* Ползунок */ .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 13px; /* Задаем нужную ширину */ height: 13px; /* и высоту */ background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */ cursor: pointer } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; overflow: hidden; } /* горизонтальный слайдер (сама полоса по которой бегает ползунок) */ .ui-slider-horizontal { height: 3px; /* задаем высоту согласно дизайна */ } /* позиционируем ползунки */ .ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -6px; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } /* оформление полосы по которой ходит ползунок */ .ui-widget-content { border: 1px solid #D4D4D4; background: #fff; } /* оформление активного участка (между двумя ползунками) */ .ui-widget-header { border: 1px solid #D4D4D4; background: #f00; } /* скругление для полосы слайдера */ .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
Некотоые из этих правил можно объединить, так как плагин щедро награждает элементы множеством классов. Например, мой изначальный
превращается в
Но я предпочел оставить стили в таком виде для большей универсальности. Думаю, тот, кому придется по этому шаблону стилизовать вертикальный ползунок, скажет мне спасибо.
Добавляем связанные инпутыТеперь самое интересное. Добавим два инпута, в которых будем отображать значения, выбранные на слайдере.
При инициализации слайдера используем события stop и slide — первое обеспечит корректное значение в момент остановки ползунка, а второе придаст интерактивности (значение инпута будет меняться в реальном времени, синхронно движению ползунка).
Код обоих событий одинаков — берем текущее значение с помошью метода.slider("values",X) и помещаем в нужный инпут:
JQuery("#slider").slider({ min: 0, max: 1000, values: , range: true, stop: function(event, ui) { jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); }, slide: function(event, ui){ jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); } });
Осталось организовать обратную связь. Учим ползунок перемещаться, если пользователь вводит значение в инпут. Тут можно использовать событие keypress, чтобы ползунок реагировал на каждую нажатую клавишу или событие change, если хотим, чтобы изменение вступало в силу после завершения ввода и ухода из поля. Дело вкуса.
Заодно я вставил проверку выхода верхнего значения за пределы диапазона (у меня это 1000) и проверку, чтобы нижний ползунок не получил значение больше верхнего:
JQuery("input#minCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if(parseInt(value1) > parseInt(value2)){ value1 = value2; jQuery("input#minCost").val(value1); } jQuery("#slider").slider("values",0,value1); }); jQuery("input#maxCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)} if(parseInt(value1) > parseInt(value2)){ value2 = value1; jQuery("input#maxCost").val(value2); } jQuery("#slider").slider("values",1,value2); });
Последняя деталь — нужно обеспечить чтобы пользователь не смог поломать плагин, введя в инпуты буквы или некорректрые числовые значения. Этот момент подробно не рассматриваю, так как он не касается непосредственно темы статьи. Любопытных отсылаю к , где это, конечно, реализовано.
В одной из следующих публикаций мы усложним задачу. Я покажу, как на основе этого решения можно сделать выбор значения с неравномерным шагом и разным масштабом. То есть когда требуется, чтобы, например, на первую половину слайдера приходился диапазон значений от 0 до 100, а на вторую от 100 до 1000.
Подобные варианты достаточно часто встречаются в интернет-магазинах — это удобно, ведь на маленьких суммах делализация более важна, а удобство пользователя, как известно, прежде всего.
Всем привет, решил написать статью о том как можно стилизовать элемент html 5 input с типом range, этакий ползунок, удобный и современный Так же покажу как работать с ним через JavaScript, на примере JQuery. Хочу сразу сказать, со стилизацией проблем практически не возникает, но вот если тебе нужно еще и какие то действия с ним выполнять, тут есть подводные камни о которых я расскажу ниже. Некоторые решение есть, но как только будут основные решения я обязательно дополню статью Поехали =)
input type range htmlДля начала давай просто напишем код html, я добавлю два input с типом range, один будет показан как изначальный вид в браузере а другой мы будем менять и зададим ему сразу класс range:
Я уже создал файл для написание кода JS, файл с таблицами стилей и подключил библиотеку JQuery У обоих инпутов одинаковые максимальны и минимальные значения, а так же начальное значение установил на 25
Открываем файл со стилями и сразу задам стили для html, body и блока с классом wrp:
Зададим стили для нормальных браузеров типа хрома, тут конечно кому как Зададим стили для класса.range:
Тем самым мы как бы обнуляем стандартные стили и можно смело писать свои стили для самой линии трека.
Тут нет ничего сверхъестественного, поэтому каждый делает свой вид линии трека как нравится. Теперь зададим стили для ползунка, та штучка за которую мы тянем или передвигаем как в плеере Чтобы задать стили для ползунка нужно добавить псевдоэлемент ::-webkit-slider-thumb и так же обнулить стили и дальше делать как нужно нам
Тоже все понятно и просто, единственное кто может не знает про последнее свойство transition , это для задания анимированного перехода между состояниями, то есть у меня будет псевдокласс :hover , и чтобы был плавный переход я добавил это свойство Давайте добавим:hover, но еще и:active
Тоже все просто и гладко. Если мы откроем в хроме или в яндекс браузере к примеру, то все выглядит как нужно. Для остальных же браузеров во всех местах вместе webkit добавляем нужный нам, то есть:
- для мозиллы moz,
- для оперы o,
- для IE ms, но про InternetExplorer поговорим позже Учитывайте, что стили для каждого браузера придется повторять, иначе если совместить и написать псевдоэлементы через запятую, работать не будет. Ниже я покажу какой псевдоэлемент для кого
Я если честно не знаю как она правильно называется, но это та полоса, которая идет за нашим ползунком когда мы его тянем или передвигаем, это может быть полоса загрузки, процесса, прогресса, индикатор какой-то не знаю в общем, но думаю вы поняли о чем речь, ведь мы с вами на одной волне, если че на картинке ниже она синего цвета:D Так вот, чтобы ее сделать нужно свойство background или background-image кто как делает
Для браузера Firefox вместо webkit
используем moz
. Жирным я выделил те места, где мы меняем значения чтобы полоса подвинулась вместе со значением самого инпута. Если сейчас мы будем двигать то полоса двигаться не будет, об этом поговорим позже
Как и обещал я пишу список какие стили для какого браузера подойдут
Это подходит для хрома, яндекса, оперы и сафари:
Мозилла, тут немного по другому, но тоже просто
Тут вообще по другому, с ума сойдешь с этими браузерами В общем IE как бы делит наш инпут на три части, поэтому вот такие правила:
Лично я не тестил на IE, так как после его установки у меня полетела винда и больше я этого не делал, тут буду подправлять что узнаю нового =)
input range JQueryЭто я уже писал выше, этим и пользуемся
Схема такая, если мы поставим обработчик события "change" и по нему будем получать value инпута, а затем менять css свойства, то будет работать так: передвигаем ползунок и отпускаем кнопку мыши, затем только передвинется линия.
И это логично, но не совсем красиво, поэтому я предлагаю другое решение
Открываем файл script.js или пишем в самом html, не важно, и пишем вот такую функцию:
Все просто, тоже самое чтобы мы и делали при событии change, получили value и поменяли стили в нужных местах, только учитывайте, что значения должны быть в процентах, так как у меня в инпуте от 0 до 100, то я ни чего не вычисялю, но если было бы к примеру от 0 до 120, то я бы полученное валуе пропускал бы через формулу (val*100)/120 , то есть получал бы процент от числа Думаю это понятно Дальше, чтобы это наконец заработало нужно указать в событии oninput элемента инпут данную функцию:
Вот и все, теперь будет работать
Ну а теперь камни в почках, про которые я говорил в начале
Известный мне камень на сегодня, так это то, что эта функция не будет работать в мозилле Почему не будет?
Ответ прост и плавает на поверхности, так как для мозиллы мы можем изменить стили только с помощью псевдоэлемента, а для JavaScript псевдоэлементов в DOM не существует, так и работать мы с ним не можем. Если была бы задача единоразовая, примеру просто поменять цвет, мы могли использовать просто второй класс, но в данном случае ребята я пока ни чего не нашел и не придумал, кто знает пишите =)
ЗаключениеВ принципе это все, но как только приедет вагон с доп порцией, я обязательно добавлю в статью Всем спасибо, пока =)
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. Браузеры по своему отображают вид ползунка, так на рис. 1 продемонстрирован вид ползунка в Chrome.
Рис. 1. Вид ползунка
Синтаксис создания ползунка следующий.
Здесь min - минимальное число в диапазоне (по умолчанию 0), max - максимальное число (по умолчанию 100), step - шаг изменения чисел (по умолчанию 1), value - текущее значение. По умолчанию value вычисляется по формуле:
Если значение max меньше, чем значение min , то value равно min .
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию. Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }
Размер рисунка:
В данном примере при управлении ползунком срабатывает событие onchange , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера в браузере IE показан на рис. 2.
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.
Рис. 1. Вид ползунка в браузерах
Синтаксис создания ползунка следующий.
Здесь min - минимальное число в диапазоне (по умолчанию 0), max - максимальное число (по умолчанию 100), step - шаг изменения чисел (по умолчанию 1), value - текущее значение. По умолчанию value вычисляется по формуле:
Если значение max меньше, чем значение min , то value равно min .
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.
Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
HTML5 IE 10 Cr Op Sa Fx
Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }
Размер рисунка:
В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.
Рис. 2. Управление шириной картинки с помощью ползунка
Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.
В настоящее время я работаю над своим первым оплачиваемым проектом. Помимо всего прочего в этом проекте от меня требуется стилизация и написание скриптов для ползунков. Есть несколько интересных моментов, на которые мне бы хотелось обратить ваше внимание, такие как проблемы отображения в IE , Android WebKit и правильное использование событий ввода и изменения. А также краткий обзор синтаксиса.
Вот мой пример . В этом конкретном случае пользователей из Голландии с помощью ползунков просят разделить 100 миллионов евро бюджетных средств между несколькими ведомствами. При этом общее значение всех ползунков не должно превышать 100 (миллионов ), что требует написание небольшого скрипта.
Ползунок, дорожка и бегунокВот ползунок. Технически он известен как, и он не поддерживается IE9 и ниже.
Здесь код HTML:
Ползунок состоит из дорожки, по которой пользователь перетаскивает бегунок. К дорожке и бегунку можно применять стили, но не скрипты.
Основы стилейСтилизация ползунков не так уж трудна. Для бегунка и дорожки можно настроить стили, хотя необходимые псевдоэлементы зависят от браузера:
Для бегунка используется -webkit-slider-thumb , -moz-range-thumb или -ms-thumb .
К дорожке можно «обратиться » с помощью -webkit-slider-runnable-track , -moz-range-track или -ms-track .
Нельзя комбинировать эти селекторы в одном правиле, даже несмотря на то, что правильнее использовать для всех браузеров одни и те же стили (кроме отступов для бегунка ). Если браузер находит один селектор, который он не распознает, то игнорирует все остальные. Поэтому вам придется повторяться или использовать генератор CSS на серверной стороне.
IE и MS Edge требуют прозрачный color и border-color на дорожке, или они отобразят стили дорожки по умолчанию. Кроме того, для ползунка им нужны иные отступы, чем в других браузерах.
В моем примере высота ползунка примерно 40 пикселей. Оказывается, в основных стилях ползунка установлено свойство overflow: hidden , которое скрывает большую часть ползунка в Edge и IE . Чтобы исправить это, мне пришлось явно задать высоту ползунка.
В IE , но не в Edge , ползунок имеет отступ. Поэтому задайте отступ padding: 0 и спасите себя от головной боли.
Я читал несколько раз, что MS Edge должен поддерживать свойства -webkit- . Но на практике оказалось, что невозможно работать с одним набором стилей и для Edge , и для WebKit/Blink . Я советую использовать отдельные -ms- стили хотя бы потому, что они нужны для IE10 и IE11 . Лучше всего определить стили -ms- после -webkit- : таким образом -ms- стили будут точно выполняться в Edge .
В браузерах, построенных на основе движков WebKit и Blink , бегунок имеет по умолчанию box-sizing: border-box , в то время как во всех остальных браузерах, значение этого свойства равно content-box . Лучше задать box-sizing для бегунка в явном виде.
WebKit и Blink также требуют -webkit-appearance: none , но с одним исключением. Смотрите ниже.
CSS шаблонВсе эти несущественные проблемы приводят к следующему шаблону CSS :
input { -webkit-appearance: none; height: 35px; /* установите свою высоту*/ padding: 0; /* стили вашего ползунка */ } input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: content-box; /* стили вашего бегунка */ } input::-moz-range-thumb { /* снова стили вашего бегунка */ } input::-ms-thumb { /* должен следовать после -webkit- */ /* снова стили вашего бегунка */ /* могут потребоваться разные отступы */ } input::-webkit-slider-runnable-track { /* стили вашей дорожки*/ } input::-moz-range-track { /* снова стили вашей дорожки */ } input::-ms-track { /* должен следовать после -webkit- */ border-color: transparent; color: transparent; /* снова стили вашей дорожки */ }
Свойство appearance и ошибка Android WebKitЕще один недостаток в браузерах на основе WebKit и Blink заключается в том, что вы должны установить свойство -webkit-appearance: none для ползунка и для бегунка (но не для дорожки ). Это показано в шаблоне CSS , приведенном выше.
Настоящая проблема в том, что Android WebKit требует от вас не использовать это объявление. Если вы добавите -webkit-appearance: none , Android WebKit будет неправильно отображать ваши стили. Удаление этого кода исправляет ошибку, но тогда стили ползунка не будут отображаться в Safari , Chrome и некоторых других браузерах. Решим эту проблему вместе.
Мы задали в CSS -webkit-appearance: none , это единственное решение, у которого есть будущее. В Android WebKit мы хотим изменить значение на slider-horizontal . Но как мы узнаем, что мы в Android WebKit ?
Распознавание браузера? Так не принято в наших кругах – что и к лучшему: это не сработало бы в Xiaomi Chromium 34 (или 35 ), который базируется на Chromium и, следовательно, требует значение none, но при этом «маскируется » под Android .
Моим первоначальным планом было получить доступ к стилям бегунка и посмотреть, соответствуют ли они моим. Если они не подходят, то мы применяем slider-horizontal :
window.getComputedStyle(slider,"::-webkit-slider-thumb").height;
Оказывается, этот подход всегда выводит стили по умолчанию, а не ваш CSS . Говоря в общих чертах, скрипты, которые пытаются сделать что-то с дорожкой или бегунком, имеют тенденцию не работать.
Затем я увидел, что это применение getComputedStyle() не поддерживается в Android WebKit . Ни один стиль не возвращается, даже стили по умолчанию.
Поэтому я написал классический трюк, который использует одну ошибку, чтобы избавиться от другой, несвязанной с ней. К счастью, это безопасный прием, так как обе ошибки могут появиться только в Android WebKit , и этот браузер уже не разрабатывается:
var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").height; if (!testAndWK) { slider.style.WebkitAppearance = "slider-horizontal"; }
Вы можете выполнить тест один раз и использовать результаты для каждого ползунка. Неважно, какое свойство CSS вы тестируете, проверьте, действительно ли оно существует. Если значение не возвращается, то устанавливаем -webkit-appearance: slider-horizontal для каждого ползунка. Проблема решена. Даже лучше, другие браузеры игнорирует нас, пока мы используем —webkit- .
Заполнение полосы прогрессаВ моем примере дорожка слева от бегунка должна иметь цвет фона отличный от дорожки справа. IE/Edge и Firefox предлагают для этого использовать псевдоэлементы, WebKit и Blink – нет. Этот код решает проблему во всех версиях IE , Firefox и Edge :
input::-ms-fill-lower { background-color: #5082e0; } input::-moz-range-progress { background-color: #5082e0; }
Что касается браузеров на основе WebKit- и Blink, то тут нужно решение с JavaScript. Я одолжил свое из примеров Ana Tudor . В этом решении используется линейный градиент со стоп-цветом, вычисляемым от текущего значения ползунка. Посмотрите скрипт , особенно код функции handleSlider() .
Всплывающие подсказкиAna Tudor также показала, как можно использовать псевдоэлемент :before в качестве стилизованной подсказки, содержащей текущее значение. К сожалению, выяснилось, что в этом случае IE/Edge и Firefox не поддерживают :before или :after . В IE/Edge есть встроенная подсказка (смотрите ниже ), но в Firefox невозможно отобразить всплывающие подсказки.
Я пробовал движущийся элемент, реагирующий на перемещение бегунка, но написание скриптов не срабатывает, и получить текущие координаты бегунка невозможно. Также пытался использовать текущее значение ползунка вместо координат, но попытка завершилась провалом. В конечном счете, мы решили использовать статическую подсказку (которая в действительности не выглядит как подсказка ).
В IE/Edge есть встроенная подсказка, которая по большей части не может быть стилизована. К счастью, вы можете скрыть ее:
input::-ms-tooltip { display: none; }
События ввода и измененияКогда пользователь передвигает бегунок по дорожке, ползунок может вызывать события ввода или изменения. Одни браузеры непрерывно «порождают » события во время перемещения, другие – только после остановки перемещения.
При отслеживании действий пользователя с ползунком перехватывайте события ввода и изменения. Затем вызывайте обработчик события, когда пользователь прекратит перемещение бегунка. Это дает стабильный результат во всех браузерах.
