Class: Slider

Створює повзунок з двома елементами: повзунком та контейнером.

Примітка:

• Slider вимагає, щоб сторінка була в Standards Mode.

Синтаксис:

var mySlider = new Slider(element, knob[, options]);

Аргументи:

1. element - (element) Елемент повзунка або повзунка.
2. knob - (element) Елемент ручки або повзунка.
3. options - (object) Опціональний об'єкт для налаштування Slider.

Опції:

1. snap - (boolean: за замовчуванням false) True, якщо ви хочете, щоб повзунок приліпав до найближчого значення.
2. offset - (number: за замовчуванням 0) Відносна зміщення для позиції повзунка на старті.
3. range - (mixed: за замовчуванням false) Масив чисел або false. Мінімальні та максимальні межові значення, які використовуватиме повзунок.
4. wheel - (boolean: за замовчуванням false) True, якщо ви хочете можливість переміщувати повзунок коліщатком миші.
5. steps - (number: за замовчуванням 100) Кількість кроків, які повинен робити/тикнути Slider.
6. mode - (string: за замовчуванням horizontal) Тип Slider може бути 'horizontal' або 'vertical' у русі.

Примітки:

• Опція range дозволяє масив чисел. Числа можуть бути від'ємними та додатними.

Slider Event: change

• (function) Викликається, коли значення Slider змінюється.

Підпис:

onChange(step)

Аргументи:

1. step - (number) Поточний крок, на якому знаходиться Slider.

Slider Event: onComplete

• (function) Викликається, коли ви закінчуєте перетягування.

Підпис:

onComplete(step)

Аргументи:

1. step - (string) Поточний крок, на якому знаходиться Slider, як рядок.

Slider Event: tick

• (function) Викликається, коли користувач перетягує повзунок. Цю подію можна перевизначити, щоб змінити поведінку tick.

Підпис:

onTick(pos)

Аргументи:

1. pos - (number) Поточна позиція, до якої перемістився повзунок.

Примітки:

• Slider спочатку використовує подію 'tick' для встановлення стилю повзунка в нову позицію.

Повертає:

• (object) Новий екземпляр Slider.

Приклади:

var mySlider = new Slider('myElement', 'myKnob', {

    range: [-50, 50],
    wheel: true,
    snap: true,
    onStart: function(){

        this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
    },
    onTick: function(pos){

        this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
    },
    onComplete: function(){

        this.element.tween('border').start('#000');
    }

});

Slider Method: set

Повзунок переміститься до переданої позиції.

Синтаксис:

mySlider.set(step);

Аргументи:

1. step - (number) Число для позиціонування Slider.

Повертає:

• (object) Цей екземпляр Slider.

Приклади:

var mySlider = new Slider('myElement', 'myKnob');
mySlider.set(0);

 
var myPeriodical = (function(){
    if(this.step == this.options.steps) $clear(myPeriodical);
        this.set(this.step++);

}).periodical(1000, mySlider);

Примітки:

• Крок автоматично обмежуватиметься між 0 та опціональним значенням steps.