Ползунок диапазона ввода не работает на Safari iOS при нажатии на дорожку

У меня есть довольно линейный слайдер диапазона прямого перемещения. Он работает очень хорошо во всех браузерах, кроме iOS Safari.

Основная проблема, с которой я сталкиваюсь, - это когда я нажимаю на дорожку слайдера, она не перемещает слайдер. Он просто выделяет слайдер. Он отлично работает при перетаскивании большого пальца. Любые идеи о том, как исправить это?

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>

Ответ 1

Добавьте свойство CSS, -webkit-tap-highlight-color: transparent к CSS элемента или полной HTML-странице. Это уберет неприятный эффект выделения на элементе, когда он коснется мобильного устройства.

Ответ 2

Safari 5.1 + должен полностью поддерживать тип "range", поэтому странно, что он не работает. Вы пытались добавить значения мин/макс/шаг? а что если вы пытаетесь использовать только чистый атрибут HTML без каких-либо классов, которые могут помешать - попробуйте вставить этот код и запустить его в браузере Safari

<input type="range" min="0" max="3.14" step="any">

это должно работать - если это так, возможно, это что-то, связанное с вашим CSS, если не попытаться использовать один из примеров чистого HTML здесь:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Ответ 3

Попробуйте использовать jQuery Mobile? Обходной путь неприятен, и я уверен, что нет возможности использовать собственный интерфейс со стандартным HTML. Он появляется из других потоков, вы можете сделать сложное решение CSS/JS.