Пример использования

Пример

$(document).ready(function() {

$("#tabs").tabs();

//Код первой вкладки (стандартное использование)
   $("#slide1").slider({value:30});
   $("#slide2").slider({orientation:'vertical',animate:'slow'});
   $("#slide3").slider({values:[250000,400000],
   min:0,
   max:1000000,
   range:true,
   step:1000,
   slide:function(event,ui){
      $("#range").val(ui.values[0]+" руб. - "+ui.values[1]+" руб.");
   }});

});

Попробовать в редакторе

Определение и использование

С помощью метода slider Вы можете превратить выбранный элемент в виджет slider.

Данный виджет позволяет пользователю совершать выбор необходимых значений из набора.

Виджет slider может иметь один или несколько ползунков. Ползунки могут перетаскиваться с помощью указателя мыши или стрелок на клавиатуре.

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настроить поведение данного виджета под конкретные нужды.

Синтаксис

$(селектор).slider(опции_или_события)

селектор выбирает элемент, который будет превращен в виджет.

опции настраивают дополнительные аспекты поведения виджета.

события события связанные с виджетом.

Опции

Опции	Описание
animate	Позволяет задать будет ли ползунок во время перетаскивания перемещаться анимированно (true) или нет (false). Вы можете также указывать скорость анимированого перемещения ползунка с помощью трех предопределенных значений: slow, normal, fast (медленно, нормально, быстро), или указанием количества миллисекунд (например 1500). Значение по умолчанию: false. Пример использования: .slider({animate:'slow'})
max	Позволяет задать максимальное значение ползунка. Значение по умолчанию: 100. Пример использования: .slider({max:70})
min	Позволяет задать минимальное значение ползунка. Значение по умолчанию: 0. Пример использования: .slider({min:20})
orientation	Позволяет задать пространственную ориентацию ползунка. Возможные значения: horizontal, vertical (горизонтальная, вертикальная). Значение по умолчанию: 'horizontal'. Пример использования: .slider({orientation:'vertical'})
range	Если данная опция имеет значение true виджет проверит имеется ли у него два ползунка и если это действительно так оформит пространство между ними. Если данная опция имеет значение 'min' виджет оформит пространство между ползунком и началом виджета, если имеет значение 'max' оформит пространство между ползунком и концом виджета. Значение по умолчанию: false. Пример использования: .slider({range:true})
step	Задает минимальное расстояния, на которое может быть перетащен ползунок. Значение по умолчанию: 1. Пример использования: .slider({step:10})
value	Задает изначальное положение ползунка. Значение по умолчанию: 0. Пример использования: .slider({value:60})
values	Позволяет задать в виджете несколько ползунков. Например если опция имеет значение [30,50], то первый ползунок будет находится на точке 30, а второй на 50. Значение по умолчанию: null. Пример использования: .slider({values:[20,80]})

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Объект ui имеет следующие свойства:

ui.handle - DOM элемент активного ползунка.
ui.value - Значение обозначающее текущее положение ползунка.

Синтаксис

$(селектор).slider({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("sliderсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").slider({create:function(event,ui){alert("Привет")}}).

События	Описание
create	Определяет функцию, код которой будет выполнен при создании виджета.
start	Определяет функцию, код которой будет выполнен, когда пользователь начнет перетаскивать ползунок.
slide	Определяет функцию, код которой будет выполнятся при каждом перемещении ползунка во время перетаскивания. Если данная функция возвращает false перемещение не будет выполнено.
change	Определяет функцию, код которой будет выполнен в конце перетаскивания, если положении ползунка при этом было изменено.
stop	Определяет функцию, код которой будет выполнен при завершении перетаскивания.

« Виджеты jQuery UI