dizmoElements slider

This element is an extension of the jQuery slider plugin that creates a slider. Everything that applies to the plugin, for example the usage, also applies to this element.

Visual

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
    }
});