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

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

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

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

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



Пример

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.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;
}

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко