Красивый ползунок выбора значения. UI ползунок на сайт

Віталий

7 років ago

Красивый ползунок выбора значения. UI ползунок на сайт

Доброго времени суток. 🙂

В этой статье рассмотрим как организовать красивый ползунок на сайте, для выбора значения. Для этого будем использовать UI ползунок, что работает с помощью jQuery библиотеки. Ранее я уже писал статью о подобном ползунке, но он был немного ограничен, так как не имел особо анимации. Некоторых это смутило, а у некоторых вызвало ступор, ведь они не могли разобраться с его работой, хотя для меня это загадка, как можно заблудится в трех березах :). Ознакомится с тем ползунком можно здесь - Вывод значения ползунка. В этой же статье, ползунок можно установить без плагина, просто добавить код ползунка себе в форму. Пример того что получится можно посмотреть ниже.

Не будем тянуть резину и быстро разберемся как такой же поставить себе на сайт, в свою форму отправки. Первым делом и должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Теперь очередь библиотеки UI ползунка. Она должна быть размещена после библиотеки jQuery.

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

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

В общим данный код добавляете в шапке или подвале вашего сайта, как обычно. Как правильно добавить скрипт, я показывал статью с инструкцией выше.

<script type="text/javascript">
$(document).ready(function(){
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 1,
max: 100,
step: 1,

slide: function( event, ui ) {
$( "#slider-result" ).html(ui.value);
},

change: function(event, ui) {
$('#znch').attr('value', ui.value);
}

});
});
</script>

Далее добавляем уже саму HTML разметку. Форма и внутри блок, что и является нашим ползунком.

<form action="" method= "POST"> 
<div class="slider">
<a class="ui-slider-handle" href="#">
<div id="slider-result">0</div>
</a>

<input id="znch" name="znch" type="hidden" />
</div>
<input type= "submit" value= "Отправить"> 
</form>

Ну и немного стилей CSS для того чтобы придать внешний вид ползунку. Можете его видоизменять как хотите, главное не допустите ошибок. чтобы потом не было проблем.

.slider {
width:230px;
height:11px;
background:#eee;
position:relative;
margin:0 auto;
padding:0 10px;
}

.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:#fc0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ui-widget-header {
background:#f00;
height:8px;
left:1px;
top:1px;
position:absolute;
}
#slider-result {
text-align:center;
position:absolute;
top:27px;
left:-8px;
background:#eee;
color:#000;
font: 16px sans-serif;
padding:5px 0;
width:40px;
}

На этом все, спасибо за внимание. 🙂

Exit mobile version