Создаем адаптивный ползунок со шкалой. Проблемы с jQuery UI slider mobile в адаптиве на телефоне

jquery ui slider mobile touch

Всем привет, недавно пришлось делать калькулятор для одного сайта, в качестве ползунков был использован jquery ui slider, чуть ниже приведу код вызова. На компе все получилось без проблем, так как использовал этот ползунок не один раз, но впервые для адаптивных сайтов. В адаптиве, как вы поняли, этот ползунок со шкалой работать не захотел. Точнее он работает и запускается, просто на touch экране его нельзя никуда переместить.

Также, в этой статье, я покажу как сделать ползунок со шкалой на jquery ui slider своими руками.

jQuery UI slider mobile не работает в адаптиве на touch экране

Как оказалось, проблема решается очень просто, достаточно скачать и подключить на сайт скрипт jquery.ui.touch-punch.min.js. После его подключения jquery ui slider mobile начал нормально работать на всех устройствах или на большинстве  🙂 (тестировал под iphone 5, iPad, android 4.4). Скачать этот файл можно у меня с сервера jquery.ui.touch-punch.min.js или же найти в сети более свежею версию. Чуть ниже я прикреплю пример использования ползунка ui slider и ссылку на демо.

 

Создаем адаптивный ползунок со шкалой на jquery ui slider

Я покажу примеры кода jquery ui slider в одном html файле + отдельно вынесу CSS чтобы он не мешал, думаю для вас не составит труда сделать аналогично но в разных файлах под сайтом на WP.

Для работы ползунка нам понадобится 3 яваскрипт файла, вот так я их подключаю в примере:

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

Если будете делать это на WP то первый файл у вас подключен всегда по умолчанию, а второй можно подключить с помощью встроенной функции:

wp_enqueue_script("jquery-ui-core",array('jquery'));

Но не принципиально.

Также, мы подключаем отдельным файлом стили:

<link href="style.css" rel="stylesheet" type="text/css">

без них наш jquery ui slider mobile ползунок работать не будет.

И теперь выкладываю собственно сам хтмл код примера:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Адаптивный ползунок со шкалой на jquery ui slider</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div id="conteiner">
<div class="calс_tab calс_tab_1">
<div class="calс_tab_p_1">
<div class="calс_tab_p_txt">Число от 1 до 100</div>
<div class="calс_tab_p_input"><input type="text" class="calс_tab_p_input_val calc_1_val_type_1" value="1"/></div>
</div><!--calс_tab_p_1-->
<div class="calс_tab_p_2">
<div class="calс_tab_slider" data-min="1" data-val="55" data-step="1" data-max="100"></div>
<div class="calс_tab_slider_grad">
<div class="calс_tab_slider_num calс_tab_slider_num_1">1</div>
<div class="calс_tab_slider_num calс_tab_slider_num_25">25</div>
<div class="calс_tab_slider_num calс_tab_slider_num_50">50</div>
<div class="calс_tab_slider_num calс_tab_slider_num_75">75</div>
<div class="calс_tab_slider_num calс_tab_slider_num_100">100</div>
</div><!--frontBox_n8_calk_polz_tabl-->
</div><!--calс_tab_p_2-->
</div><!--calс_tab_1-->
</div><!--conteiner-->
<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".calс_tab_slider").each(function(){
var insert_val=$(this).closest(".calс_tab").find(".calс_tab_p_input_val");
var curr_slide=$(this).slider({
min:parseInt($(this).attr("data-min")),
max:parseInt($(this).attr("data-max")),
step:parseFloat($(this).attr("data-step")),
value:parseInt($(this).attr("data-val")),
stop: function(event, ui) {
insert_val.val(curr_slide.slider("value"));
//calc(); можно подключить функцию обработки/расчета если надо
},
slide: function(event, ui){
setTimeout(function(){
insert_val.val(curr_slide.slider("value"));
//calc(); можно подключить функцию обработки/расчета если надо
},30);
}
});
insert_val.on("change",function(){
var this_val=$(this).val();
var tmp_1=curr_slide.slider("value");
var tmp_2=this_val;
if(tmp_1!=tmp_2){
curr_slide.slider("value",tmp_2);
//calc(); можно подключить функцию обработки/расчета если надо
}
});
insert_val.val($(this).attr("data-val")).trigger("change");
});
});
})(jQuery);
</script>
</body>
</html>

 

также, выкладываю CSS код примера:

#conteiner{
width:1000px;
height:auto;
margin:0px auto;
padding-top:50px;
max-width:100%;
}
.calс_tab{
width:100%;
height:auto;
}
.calс_tab_p_1{
overflow:hidden;
padding-bottom:10px;
}
.calс_tab_p_txt{
font-size:14px;
float:left;
width:49%;
line-height:20px;
color:#333;
}
.calс_tab_p_input{
float:right;
width:10%;
}
.calс_tab_p_input_val{
display:block;
width:100%;
height:20px;
box-sizing:border-box;
border:1px solid #555;
color:#333;
text-align:center;
}
.calс_tab_p_2{
clear:both;
position:relative;
width:100%;
box-sizing:border-box;
padding:0px 5px;
display:block;
}
.calс_tab_slider{
position:relative;
display:block;
width:100%;
height:1px;
background:#aaa;
z-index:5;
}
.calс_tab_slider:before,
.calс_tab_slider:after{
position:absolute;
top:0px;
left:-5px;
width:5px;
height:1px;
content:" ";
display:block;
background:inherit;
z-index:5;
}
.calс_tab_slider:after{left:auto; right:-5px;}
.ui-slider-handle{
position:absolute;
top:-6px;
display:block;
width:10px;
height:12px;
margin-left:-5px;
border:2px solid #333;
box-sizing:border-box;
background:#fff;
cursor:pointer;
z-index:7;
}
.calс_tab_slider_grad{
height:30px;
position:relative;
}
.calс_tab_slider_num{
position:absolute;
top:10px;
left:auto;
width:auto;
color:#333;
font-size:12px;
margin-left:-1%;
}
.calс_tab_slider_num_1{left:0px; margin-left:-5px;}
.calс_tab_slider_num_25{left:25%;}
.calс_tab_slider_num_50{left:50%;}
.calс_tab_slider_num_75{left:75%;}
.calс_tab_slider_num_100{right:-5px; margin-left:0px;}

Проверить работоспособность кода вы сможете ниже, там же будет кнопка скачать пример.

Демо пример ползунка со шкалой ui slider mobile

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

Посмотреть работу ползунка со шкалой на базе jquery ui slider mobile вы можете нажав на кнопку демо (пример будет открыть во всплывающем окне), для скачивания файла достаточно нажать на кнопку скачать:

 

На этом у меня все, надеюсь этот пример вам помог и вы с радостью поделитесь этой статьей с друзьями в соц. сетях:

Комментарии к записи «Создаем адаптивный ползунок со шкалой. Проблемы с jQuery UI slider mobile в адаптиве на телефоне»:
Сделать заказ
Онлайн помощь по WordPress
На сайте используются файлы Сookies. Отключить Сookies можно в настройках браузера!