2016-07-18 3 views
0

Я работаю над ползунком ценового диапазона. Я следую руководству jQuery и использую их как ссылку.Добавление опции касания к слайдеру

Моя проблема заключается в том, что я не могу добавить перемещаемое поведение на самом ползунке. Я исследовал и попытался добавить jquery.ui.touch-punch.min.js, однако это не решило мою проблему.

Пожалуйста, смотрите ниже мой код:

$(function() { 
 
    $("#slider-range-min").slider({ 
 
     range: "min", 
 
     value: 400, 
 
     min: 400, 
 
     max: 2000, 
 
     slide: function(event, ui) { 
 
     $("#amount").val("£" + ui.value); 
 
     } 
 
    }); 
 
    $("#amount").val("£" + $("#slider-range-min").slider("value")); 
 
    $('#slider-range-min').draggable(); 
 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 

 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> 
 
<script src="jquery.ui.touch-punch.min.js"></script> 
 
<p> 
 
    <label for="amount">Maximum price:</label> 
 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
 
</p> 
 

 
<div id="slider-range-min"></div>

+0

Что вы подразумеваете под «Я не могу добавить перемещаемое поведение на фактическом слайдере»? Все, что у вас, похоже, отлично работает для меня. – DBS

+0

@DBS Я не могу перетащить слайдер на сенсорные устройства – John

+0

Является ли '' правильно загружается? (Откройте консоль dev и проверьте наличие ошибок) – DBS

ответ

2

Вам нужно будет убедиться, что вы правильно погрузка:

<script src="jquery.ui.touch-punch.min.js"></script> 

Ваш текущий код ожидает этот файл быть в той же папке, что и ваша HTML-страница, если она размещена в другом месте, вам нужно будет изменить ссылку или использовать CDN какой-либо формы.

Смежные вопросы