Виджет ползунка

Виджет ползункаверсия добавлена: 1.5

Описание: Перетащите ползунок, чтобы выбрать числовое значение.

Быстрое навигацияПримеры

Плагин jQuery UI Slider преобразует выбранные элементы в ползунки. Доступны различные параметры, такие как несколько ползунков и диапазоны. Ползунок можно перемещать с помощью мыши или клавиш со стрелками.

Виджет ползунка создаст элементы ползунков с классом ui-slider-handle при инициализации. Вы можете указать пользовательские элементы ползунков, создав и добавив элементы, а затем добавив класс ui-slider-handle перед инициализацией. Он будет создавать только необходимое количество ползунков, соответствующее длине value/values. Например, если вы указываете values: [ 1, 5, 18 ], и создаёте один пользовательский ползунок, плагин создаст остальные два.

Тема

Виджет ползунка использует фреймворк стилей jQuery UI CSS для настройки своего внешнего вида. Если необходима специфическая стилизация ползунка, можно использовать следующие имена классов CSS для переопределения или в качестве ключей для classes параметра:

ui-slider: Дорожка элемента управления ползунком. Этот элемент дополнительно будет иметь имя класса ui-slider-horizontal или ui-slider-vertical в зависимости от orientation параметра ползунка.
- ui-slider-handle: Один из ползунков слайдера.
- ui-slider-range: Выбранный диапазон, используемый, когда range параметр установлен. Этот элемент может дополнительно иметь класс ui-slider-range-min или ui-slider-range-max, если параметр range установлен на "min" или "max" соответственно.

Зависимости

Дополнительные заметки:

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

Параметры

animate

Тип: Boolean или String или Число

По умолчанию: false

Плавно перемещать ползунок при нажатии пользователем на дорожку слайдера. Также принимает любое допустимое время анимации.

Поддерживаются несколько типов:

Boolean: При установке на true, ползунок будет анимироваться с заданной по умолчанию длительностью.
String: Название скорости, например "fast" или "slow".
Число: Длительность анимации в миллисекундах.

Примеры кода:

Инициализируйте ползунок с указанием параметра animate:

$( ".selector" ).slider({
  animate: "fast"
});

Получите или установите параметр animate, после инициализации:

// Getter
var animate = $( ".selector" ).slider( "option", "animate" );
 
// Setter
$( ".selector" ).slider( "option", "animate", "fast" );

classes

Тип: Объект

По умолчанию:

{
  "ui-slider": "ui-corner-all",
  "ui-slider-handle": "ui-corner-all",
  "ui-slider-range": "ui-corner-all ui-widget-header"
}

Укажите дополнительные классы для добавления к элементам виджета. Любые классы, указанные в разделе Тематизация, могут использоваться в качестве ключей для переопределения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьёй по параметру classes.

Примеры кода:

Инициализируйте ползунок с указанием параметра classes, изменив темку для класса ui-slider:

$( ".selector" ).slider({
  classes: {
    "ui-slider": "highlight"
  }
});

Получите или установите свойство параметра classes, после инициализации, здесь считываем и изменяем тему для класса ui-slider:

// Getter
var themeClass = $( ".selector" ).slider( "option", "classes.ui-slider" );
 
// Setter
$( ".selector" ).slider( "option", "classes.ui-slider", "highlight" );

disabled

Тип: Boolean

По умолчанию: false

Отключает ползунок, если установлено значение true.

Примеры кода:

Инициализируйте ползунок с указанием параметра disabled:

$( ".selector" ).slider({
  disabled: true
});

Получите или установите параметр disabled после инициализации:

// Getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
 
// Setter
$( ".selector" ).slider( "option", "disabled", true );

max

Тип: Число

По умолчанию: 100

Максимальное значение ползунка.

Примеры кода:

Инициализируйте ползунок с указанием параметра max:

$( ".selector" ).slider({
  max: 50
});

Получите или установите параметр max после инициализации:

// Getter
var max = $( ".selector" ).slider( "option", "max" );
 
// Setter
$( ".selector" ).slider( "option", "max", 50 );

min

Тип: Число

По умолчанию: 0

Минимальное значение ползунка.

Примеры кода:

Инициализируйте ползунок с указанием параметра min:

$( ".selector" ).slider({
  min: 10
});

Получите или установите параметр min после инициализации:

// Getter
var min = $( ".selector" ).slider( "option", "min" );
 
// Setter
$( ".selector" ).slider( "option", "min", 10 );

orientation

Тип: Строка

По умолчанию: "horizontal"

Определяет, перемещаются ли ползунки горизонтально (мин слева, макс справа) или вертикально (мин внизу, макс вверху). Возможные значения: "horizontal", "vertical".

Примеры кода:

Инициализируйте ползунок с указанием параметра orientation:

$( ".selector" ).slider({
  orientation: "vertical"
});

Получите или установите параметр orientation после инициализации:

// Getter
var orientation = $( ".selector" ).slider( "option", "orientation" );
 
// Setter
$( ".selector" ).slider( "option", "orientation", "vertical" );

range

Тип: Boolean или Строка

По умолчанию: false

Определяет, представляет ли ползунок диапазон.

Поддерживаются несколько типов:

Boolean: Если установлено значение true, ползунок определит, есть ли у вас два ползунка, и создаст стилизуемый элемент диапазона между ними.
Строка: Либо "min" или "max". Диапазон мин идет от мин слайдера до одного ползунка. Диапазон макс идет от одного ползунка до макс слайдера.

Примеры кода:

Инициализируйте ползунок с указанием параметра range:

$( ".selector" ).slider({
  range: true
});

Получите или установите параметр range после инициализации:

// Getter
var range = $( ".selector" ).slider( "option", "range" );
 
// Setter
$( ".selector" ).slider( "option", "range", true );

step

Тип: Число

По умолчанию: 1

Определяет размер или количество каждого интервала или шага, который ползунок делает между мин и макс. Полный указанный диапазон значений ползунка (макс - мин) должен быть чётным кратным шага.

Примеры кода:

Инициализируйте ползунок с указанием параметра step:

$( ".selector" ).slider({
  step: 5
});

Получите или установите параметр step после инициализации:

// Getter
var step = $( ".selector" ).slider( "option", "step" );
 
// Setter
$( ".selector" ).slider( "option", "step", 5 );

value

Тип: Число

По умолчанию: 0

Определяет значение ползунка, если есть только один ползунок. Если есть более одного ползунка, определяет значение первого ползунка.

Примеры кода:

Инициализируйте ползунок с указанием параметра value:

$( ".selector" ).slider({
  value: 10
});

Получите или установите параметр value после инициализации:

// Getter
var value = $( ".selector" ).slider( "option", "value" );
 
// Setter
$( ".selector" ).slider( "option", "value", 10 );

values

Тип: Массив

По умолчанию: null

Этот параметр может использоваться для указания нескольких ползунков. Если параметр range установлен на true, длина values должна быть 2.

Примеры кода:

Инициализируйте ползунок с указанием параметра values:

$( ".selector" ).slider({
  values: [ 10, 25 ]
});

Получите или установите параметр values после инициализации:

// Getter
var values = $( ".selector" ).slider( "option", "values" );
 
// Setter
$( ".selector" ).slider( "option", "values", [ 10, 25 ] );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность слайдера. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).slider( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Отключает слайдер.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).slider( "disable" );

enable()Возвращает: jQuery (только для плагина)

Включает слайдер.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).slider( "enable" );

instance()Возвращает: Объект

Получает объект экземпляра слайдера. Если у элемента нет связанного экземпляра, undefined возвращается.

В отличие от других методов виджетов, instance() безопасно вызывать для любого элемента после загрузки плагина слайдера.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода instance:

$( ".selector" ).slider( "instance" );

option( optionName )Возвращает: Объект

Получает значение, связанное с указанным optionName.

Примечание: Для опций, имеющих объекты в качестве значения, можно получить значение конкретного ключа, используя нотацию точек. Например, "foo.bar" получит значение свойства bar опции foo.

optionName

Тип: Строка

Имя опции для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).slider( "option", "disabled" );

option()Возвращает: Объект

Получает объект, содержащий пары ключ/значение, представляющие текущий хэш опций слайдера.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).slider( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение опции слайдера, связанной с указанным optionName.

Примечание: Для опций, имеющих объекты в качестве значения, можно установить значение только одного свойства, используя нотацию точек для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции для установки.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).slider( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает одну или несколько опций для слайдера.

options

Тип: Объект

Карта пар опция-значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).slider( "option", { disabled: true } );

value()Возвращает: Число

Получить значение слайдера.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода:

var selection = $( ".selector" ).slider( "value" );

value( value )Возвращает: jQuery (только для плагина)

Установить значение слайдера.

value

Тип: Число

Значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).slider( "value", 55 );

values()Возвращает: Массив

Получить значение для всех ползунков.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода:

var values = $( ".selector" ).slider( "values" );

values( index )Возвращает: Число

Получить значение для указанного ползунка.

index

Тип: Целое число

Индекс ползунка (нумерация с нуля).

Примеры кода:

Вызов метода:

var value = $( ".selector" ).slider( "values", 0 );

values( index, value )Возвращает: jQuery (только для плагина)

Установить значение для указанного ползунка.

index

Тип: Целое число

Индекс ползунка (нумерация с нуля).
value

Тип: Число

Значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).slider( "values", 0, 55 );

values( values )Возвращает: jQuery (только для плагина)

Установить значения для всех ползунков.

values

Тип: Массив

Значения для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).slider( "values", [ 55, 105 ] );

События

change( event, ui )Тип: `slidechange`

Вызывается после того, как пользователь перетащил ползунок, если значение изменилось; или если значение изменено программно с помощью метода value.

event

Тип: Event
ui

Тип: Объект
- handle
  
  Тип: Элемент
  
  HTML-элемент, представляющий ползунок, который был изменен.
- handleIndex
  
  Тип: Число
  
  Числовой индекс ползунка, который был перемещен.
- value
  
  Тип: Число
  
  Текущее значение ползунка.

Примеры кода:

Инициализация ползунка с указанным обратным вызовом change:

$( ".selector" ).slider({
  change: function( event, ui ) {}
});

Связывание обработчика событий со событием slidechange:

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

create( event, ui )Тип: `slidecreate`

Вызывается при создании ползунка.

event

Тип: Event
ui

Тип: Объект

Примечание: Объект ui пустой, но включен для согласованности с другими событиями.

Примеры кода:

Инициализация ползунка с указанным обратным вызовом create:

$( ".selector" ).slider({
  create: function( event, ui ) {}
});

Связывание обработчика событий со событием slidecreate:

$( ".selector" ).on( "slidecreate", function( event, ui ) {} );

slide( event, ui )Тип: `slide`

Вызывается при каждом движении мыши во время перетаскивания. Значение, предоставленное в событии как ui.value, представляет собой значение, которое будет иметь ползунок в результате текущего движения. Отмена события предотвратит движение ползунка, и ползунок сохранит предыдущее значение.

event

Тип: Event
ui

Тип: Объект
- handle
  
  Тип: Элемент
  
  HTML-элемент, представляющий перемещаемый ползунок.
- handleIndex
  
  Тип: Число
  
  Числовой индекс перемещаемого ползунка.
- value
  
  Тип: Число
  
  Значение, к которому ползунок переместится, если событие не отменено.
- values
  
  Тип: Массив
  
  Массив текущих значений ползунка с несколькими ручками.

Примеры кода:

Инициализация ползунка с указанным обратным вызовом slide:

$( ".selector" ).slider({
  slide: function( event, ui ) {}
});

Связывание обработчика событий со событием slide:

$( ".selector" ).on( "slide", function( event, ui ) {} );

start( event, ui )Тип: `slidestart`

Вызывается при начале перетаскивания пользователем.

event

Тип: Event
ui

Тип: Объект
- handle
  
  Тип: Элемент
  
  HTML-элемент, представляющий перемещаемый ползунок.
- handleIndex
  
  Тип: Число
  
  Числовой индекс перемещаемого ползунка.
- value
  
  Тип: Число
  
  Текущее значение ползунка.

Примеры кода:

Инициализация ползунка с указанным обратным вызовом start:

$( ".selector" ).slider({
  start: function( event, ui ) {}
});

Связывание обработчика событий со событием slidestart:

$( ".selector" ).on( "slidestart", function( event, ui ) {} );

stop( event, ui )Тип: `slidestop`

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

event

Тип: Event
ui

Тип: Объект
- handle
  
  Тип: Элемент
  
  HTML-элемент, представляющий перемещенный ползунок.
- handleIndex
  
  Тип: Число
  
  Числовой индекс перемещенного ползунка.
- value
  
  Тип: Число
  
  Текущее значение ползунка.

Примеры кода:

Инициализация ползунка с указанным обратным вызовом stop:

$( ".selector" ).slider({
  stop: function( event, ui ) {}
});

Связывание обработчика событий со событием slidestop:

$( ".selector" ).on( "slidestop", function( event, ui ) {} );

Пример:

Простой ползунок jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <style>#slider { margin: 10px; }  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="slider"></div>
 
<script>
$( "#slider" ).slider();
</script>
 
</body>
</html>

Виджет ползунка