Просмотров: 14 887

Делаем Jquery UI slider (ползунок).

Добрый день.

Сегодня хочу показать, как можно сделать вот такой ползунок для вашего сайта и вытаскивать с него данные с помощью Jquery.

Попробуйте «поиграть» с ним ниже.

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

Поэтому, берите это на вооружение и применяйте где это вам понадобиться.

Создание такого ползунка станет возможным при подключении к вашей веб-странице двух библиотек:

1) Библиотеки Jquery

Скачать ее можно здесь

http://jquery.com/

2) И дополнения к библиотеке Jquery UI (User Interphase) или пользовательский интерфейс.

Скачать ее можно здесь

http://jqueryui.com/

Вот код, который я использовал для создания такого ползунка:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ползунок Jquery UI</title>

<script src="http://code.jquery.com/jquery-latest.js"></script><!--Подключаем библиотеку Jquery-->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><!--Подключаем стили CSS для библиотеки Jquery UI-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!--Подключаем библиотеку Jquery UI-->

<script type="text/javascript">

$(document).ready(function(){
  $( "#slider" ).slider({
value : 0,//Значение, которое будет выставлено слайдеру при загрузке
  min : -150,//Минимально возможное значение на ползунке
  max : 150,//Максимально возможное значение на ползунке
  step : 1,//Шаг, с которым будет двигаться ползунок
  create: function( event, ui ) {
   val = $( "#slider" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
  $( "#contentSlider" ).html( val );//Заполняем этим значением элемент с id contentSlider
 },
 slide: function( event, ui ) {
  $( "#contentSlider" ).html( ui.value );//При изменении значения ползунка заполняем элемент с id contentSlider
            }
        });
});
</script> 
</head>

<body> 
<span id="contentSlider"></span>
<div id="slider"></div>
</body>
</html>

Вот стили CSS, которые позволят сделать сам ползунок слайдера круглым.

.ui-slider-handle {
width: 30px !important;
height: 30px !important;
border-radius: 15px 15px 15px 15px !important;
-webkit-border-radius: 15px 15px 15px 15px !important;
background: -webkit-linear-gradient(top, #ff770f, #ff5718) !important;
background: -o-linear-gradient(top, #ff770f, #ff5718) !important;
background: -ms-linear-gradient(top, #ff770f, #ff5718) !important;
background: linear-gradient(top, #ff770f, #ff5718) !important;
border: none !important;
top: 50% !important;
margin-top: -15px !important;
margin-left: -15px !important;
cursor: pointer !important;
outline: none !important;
}

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

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.

  • http://www.kildim.ru Мфтщ

    Подскажите, пожалуйста, как сделать слайдер с нелинейным выбором значений?
    Например, нужно дать возможность выбрать с помощью бегунка значения 100, 125, 200, 215?
    То есть как сделать шаг слайдера нелинейным?