Не будем тянуть резину и быстро разберемся как такой же поставить себе на сайт, в свою форму отправки. Первым делом и должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Теперь очередь библиотеки UI ползунка. Она должна быть размещена после библиотеки jQuery.
<script src="http://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;
}
На этом все, спасибо за внимание. 🙂
