слайдеры jQuery UI на сенсорных устройствах

Я разрабатываю веб-сайт с использованием пользовательского интерфейса jQuery, и на моем сайте есть несколько элементов, которые кажутся несовместимыми при просмотре на устройствах с сенсорным экраном; они не вызывают никаких ошибок, но поведение не такое, каким должно быть.

Рассматриваемые элементы - это ползунки и ползунки, как определено пользовательским интерфейсом jQuery; на сенсорном экране вместо того, чтобы регистрировать касание как взятие ручки и перетаскивание как перетаскивание ручки через ползунок, оно просто сдвигает всю веб-страницу в сторону экрана. Это сработает, если вы коснетесь ручки, а затем коснетесь того места на слайдере, где вы хотите, чтобы ручка закончилась, но это очень медленно и не идеально. Любые идеи?

Я попытался загрузить плагин jqtouch, а затем прикрепить .touch([...]) ко всем вызовам slider () и rangelider (), но это не сработало.

Спасибо!

ОБНОВЛЕНИЕ: я нашел этот "патч" на сайте jQuery UI.

http://bugs.jqueryui.com/ticket/4143

в нем говорится, что это облегчает слайдер на iPhone, но теперь еще один глупый вопрос: как мне включить этот «патч» в свой код? Могу ли я просто включить его в начало кода, как плагин?

Эта библиотека, кажется, предлагает то, что вы ищете:

https://github.com/furf/jquery-ui-touch-punch#readme

Там также есть пример кода использования (просто добавьте плагин):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

Просто хотел добавить новую информацию об этом. Touch-punch отлично подойдет для iPad и устройств Android. Но слайдер не будет работать на мобильных устройствах Windows, насколько я мог протестировать (с последними версиями jquery ui и Touch punch)

Исправить довольно просто, просто добавьте следующие CSS-правила в .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

Надеюсь это поможет

Как предложил @dazbradbury, библиотека сенсорной панели может помочь преобразовать события мыши в события касания. Параметры в .draggable () ограничивают перемещение ползунка, поэтому его нельзя переместить за пределы родительского ползунка.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

РЕДАКТИРОВАТЬ: если вы уже используете слайдер JQuery UI , вам нужно только включить библиотеку touchpunch. Не вызывайте .draggable () для дескриптора .ui-slider-handle, потому что он перезапишет существующие функции.

У меня такая же проблема. Я разработал тщательно продуманный интерфейс слайдера на основе слайдера пользовательского интерфейса jQuery только для того, чтобы понять, что он вообще не работает на мобильных устройствах. Я попробовал перечисленные здесь предложения, но поскольку у меня есть собственное решение, основанное только на jQuery UI Slider, оно не сработало.

Просто используйте noUiSlider .

Он имеет все сложные функции (и многое другое), как тот, который я построил поверх слайдера jQuery UI. Он прекрасно работает на мобильных устройствах и легко стилизован.