♥ § Клуб Одиноких Сердец :: Элемент Слайдер (Slider) плагина UI библиотеки jQuery ♥

Описание: Позволяет тащить за ручку указатель, чтобы выбрать числовое значение на Слайдере (полосе прокрутки).
Description: Drag a handle to select a numeric value.

Пример странички Слайдер Дефолтный (по умолчанию, Default functionality).:
можно посмотреть здесь.

Пример странички Слайдер пошаговый (Snap to increments):
можно посмотреть здесь.

Пример странички Слайдер Ранжируемый (Range slider):
можно посмотреть здесь.

Пример странички Слайдер с установленным минимумом (Range with fixed minimum):
можно посмотреть здесь.

Пример странички Слайдер Гостиничный (Резервация комнат, Room reservation):
можно посмотреть здесь.

Пример странички Слайдер с установленным максимумом (Range with fixed maximum):
можно посмотреть здесь.

Пример странички Слайдер Вертикальный (Vertical slider):
можно посмотреть здесь.

Пример странички Слайдер Вертикальный с Диапазоном (Vertical range slider):
можно посмотреть здесь.

Пример странички Слайдер Многоликий (Multiple sliders):
можно посмотреть здесь.

Пример странички Слайдер Выбор Цвета (Simple colorpicker):
можно посмотреть здесь.

Пример странички Слайдер Простой СкроллБар (Simple scrollbar):
можно посмотреть здесь.

---

Теория

Тесты по теории можно посмотреть здесь.

---

Options (Опции)

---

animate
Type: Boolean or String or Number
Default: false

Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
Вызывать ли мягкое скольжение ручки, когда пользователь кликает на треке Слайдера. Также может принимать любое валидное значение продолжительности анимации.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean: When set to true, the handle will animate with the default duration. Когда установлена на значение true (истина), ручка будет анимирована с дефолтной продолжительностью.
• String: The name of a speed, such as "fast" or "slow". Названия скорости, такие как: "fast" (быстрая) или "slow" (медленная). • Number: The duration of the animation, in milliseconds. Продолжительность анимации в миллисекундах.


Code examples: (Примеры кода: )
Initialize the slider with the animate option specified:
Инициализация Слайдера с определенной опцией animate:



Get or set the animate option, after initialization:
Можно получить или установить опцию animate после инициализации:

---

disabled
Type: Boolean
Default: false

Disables the slider if set to true.
Выключает Слайдер, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the resizable with the disabled option specified:
Инициализация Слайдера с определенной опцией disabled:



Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

---

max
Type: Number
Default: 100

The maximum value of the slider.
Максимальное значение Слайдера.

Code examples: (Примеры кода: )
Initialize the slider with the max option specified:
Инициализация Слайдера с определенной опцией max:



Get or set the max option, after initialization:
Можно получить или установить опцию max после инициализации:

---

min
Type: Number
Default: 0

The minimum value of the slider.
Минимальное значение Слайдера.

Code examples: (Примеры кода: )
Initialize the slider with the min option specified:
Инициализация Слайдера с определенной опцией min:



Get or set the min option, after initialization:
Можно получить или установить опцию min после инициализации:

---

orientation
Type: String
Default: "horizontal"

Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: "horizontal", "vertical".
Определяет, должна ли ручка Слайдера двигаться горизонтально (минимум слева, максимум справа) или вертикально (минимум внизу, максимум на верху). Возможные значения: "horizontal" (горизонтально), "vertical" (вертикально).

Code examples: (Примеры кода: )
Initialize the slider with the orientation option specified:
Инициализация Слайдера с определенной опцией orientation:



Get or set the orientation option, after initialization:
Можно получить или установить опцию orientation после инициализации:

---

range
Type: Boolean or String
Default: false

Whether the slider represents a range.
Определяет, содержит ли Слайдер интервал.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean: If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Если установлена на значение true (истина), Слайдер будет фиксировать, если вы имеете две ручки и создаете стилевой интервальный элемент между ними.
• String: Either "min" or "max". A min range goes from the slider min to one handle. A max range goes from one handle to the slider max. Либо "min" (минимум), либо "max" (максимум). Минимальный интервал располагается от точки минимума Слайдера до одной ручки. Максимальный интервал располагается от одной ручки до точки максимума Слайдера.

Code examples: (Примеры кода: )
Initialize the slider with the range option specified:
Инициализация Слайдера с определенной опцией range:



Get or set the range option, after initialization:
Можно получить или установить опцию range после инициализации:

---

step
Type: Number
Default: 1

Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.
Определяет размер или количество каждого интервала или шагов Слайдера между минимумом и максимумом. Полное определенное значением интервала Слайдера (от минимума до максимума) должно точно делиться на ровные шаги.

Code examples: (Примеры кода: )
Initialize the slider with the step option specified:
Инициализация Слайдера с определенной опцией step:



Get or set the step option, after initialization:
Можно получить или установить опцию step после инициализации:

---

value
Type: Number
Default: 0

Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
Определяет значение Слайдера, если он имеет только одну ручку. Если на нем есть более одной ручки, определяется значение первой ручки.

Code examples: (Примеры кода: )
Initialize the slider with the value option specified:
Инициализация Слайдера с определенной опцией value:



Get or set the value option, after initialization:
Можно получить или установить опцию value после инициализации:

---

values
Type: Array
Default: null

This option can be used to specify multiple handles. If the range option is set to true, the length of values should be 2.
Эта опция может быть использована для определения нескольких ручек. Если опция range (интервал) установлена на значение true (истина), количество значений массива должно быть равно 2.

Code examples: (Примеры кода: )
Initialize the slider with the values option specified:
Инициализация Слайдера с определенной опцией values:



Get or set the values option, after initialization:
Можно получить или установить опцию values после инициализации:

---

Methods (Методы)

---

destroy()
Removes the slider functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Слайдера. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):

---

disable()
Disables the slider.
• This method does not accept any arguments.

Выключает Слайдер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):

---

enable()
Enables the slider.
• This method does not accept any arguments.

Включает Слайдер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):

---

option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current slider options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Слайдера.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( optionName, value )
Sets the value of the slider option associated with the specified optionName.
Устанавливает значение опции Слайдера, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( options )
Sets one or more options for the slider.

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

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

value()
Returns: Number
Get the value of the slider.
• This method does not accept any arguments.

Получает значение Слайдера.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

value( value )
Returns:
Set the value of the slider.
Устанавливает значение Слайдера.
• value
Type: Number (Число)
The value to set. Значение для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

values()
Returns: Array
Get the value for all handles.
• This method does not accept any arguments.

Получает значения всех ручек Слайдера.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

values( index )
Returns: Number
Get the value for the specified handle.
Получает значение определенной ручки Слайдера.
• index
Type: Integer (Целое Число)
The zero-based index of the handle. Индекс с базой 0 (ноль) для ручки Слайдера.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

values( index, value )
Returns: Number
Set the value for the specified handle.
Устанавливает значение определенной ручки Слайдера.
• index
Type: Integer (Целое Число)
The zero-based index of the handle. Индекс с базой 0 (ноль) для ручки Слайдера.

• value
Type: Number (Число)
The value to set. Значение для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

values( values )
Returns: Number
Set the value for all handles.
Устанавливает значения для всех ручек Слайдера.
• values
Type: Array (Массив)
The values to set. Значения для установки для всех ручек Слайдера.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

widget()
Returns a jQuery object containing the slider.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий Слайдер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:

---

Events (События)

---

change( event, ui )
Type: slidechange

Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.

• event
Type: Event

• ui
Type: Object

◦ handle
Type: jQuery
The jQuery object representing the handle that was changed.

◦ value
Type: Number
The current value of the slider.

Code examples: (Примеры кода: )
Initialize the slider with the change callback specified:

Bind an event listener to the slidechange event:

---

create( event, ui )
Type: slidecreate

Triggered when the slider is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the slider with the create callback specified:

Bind an event listener to the slidecreate event:

---

slide( event, ui )
Type: slide

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.

• event
Type: Event

• ui
Type: Object

◦ handle
Type: jQuery
The jQuery object representing the handle being moved.

◦ value
Type: Number
The value that the handle will move to if the event is not canceled.

◦ values
Type: Array
An array of the current values of a multi-handled slider.

Code examples: (Примеры кода: )
Initialize the slider with the slide callback specified:

Bind an event listener to the slide event:

---

start( event, ui )
Type: slidestart

Triggered when the user starts sliding.

• event
Type: Event

• ui
Type: Object

◦ handle
Type: jQuery
The jQuery object representing the handle being moved.

◦ value
Type: Number
The current value of the slider.

Code examples: (Примеры кода: )
Initialize the slider with the start callback specified:

Bind an event listener to the slidestart event:

---

stop( event, ui )
Type: slidestop

Triggered after the user slides a handle.

• event
Type: Event

• ui
Type: Object

◦ handle
Type: jQuery
The jQuery object representing the handle that was moved.

◦ value
Type: Number
The current value of the slider.

Code examples: (Примеры кода: )
Initialize the slider with the stop callback specified:

Bind an event listener to the slidestop event:

---

Overview (Обзор)
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.

The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization. It will only create the number of handles needed to match the length of value/values. For example, if you specify values: [ 1, 5, 18 ] and create one custom handle, the plugin will create the other two.

Плагин jQuery UI Слайдер (Slider) помещает выбранные элементы в Слайдеры. Существует несколько разных опций, такие как множественные ручки и интервалы. Ручку Слайдера можно двигать с помощью мыши или клавиш клавиатуры "стрелки".

Виджет Слайдер создает элементы ручек с классом ui-slider-handle при инициализации. Вы можете определить свои элементы ручек путем создания и добавления элементов и добавления класса ui-slider-handle перед инициализацией. Это всего лишь только создаст требуемое количество ручек в соответствии с количеством значений. Например, если вы определите значения: [ 1, 5, 18 ] и создадите одну стилизованную под ваш стиль ручку, плагин создаст сам остальные две ручки.

---

Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.

---

Example:

---

Example: A simple jQuery UI Slider.
Этот пример можно посмотреть здесь.

---

Примеры Слайдера на этом сайте: Дефолтный, Пошаговый, Ранжируемый, С Минимумом, Гостиничный, С максимумом, Вертикальный, Вертикальный с Диапазоном, Многоликий, Цветной, СкроллБар.

---