Slider

Visual

Creates a slider that can be used as an element. This is an extension of the jQuery slider plugin. Everything that applies to the plugin, for example the usage, also applies to this element.

Data type

<div id="my-slider" data-type="dizmo-slider" ></div>

Constraints

All the constraints that apply to the jQuery UI slider apply here too.

Usage

Manual initialization:

DizmoElements('#my-slider').dslider({
      orientation: 'horizontal',
      step: 1,
      max: 100,
      value: 0
});

orientation: can be ‘horizontal’ or ‘vertical’ step: can be any number between 1 and n max: maximum value of the slider value: set the slider to a certain value between 0 and max

Make sure you update the slider after you set the orientation, step, max or value parameters:

DizmoElements('#my-slider').dslider('update');

This example shows how to attach an event handler to the slider:

DizmoElements('#my-slider').dslider({
    onSliderMoved: function(value, e) {
    // Do something on slide change
    console.log("new slider position="+value);
    }
});

This example illustrates how to set a slider value programmatically:

DizmoElements('#my-slider').dslider('value',40);

To get the current value, you can use:

var myval=DizmoElements('#my-slider').dslider('value');

You can also have an event fired before the slider is moved:

DizmoElements('#my-slider').dslider({
    beforeSliderMoved: function(value, e) {
    // Do something before slider move
    }
});