modo.Slider

Slider elements can be used to pick a numeric value or a numeric range between a minimum and maximum value.

Constructor

modo.Slider(params)modo.Slider

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

Property	Description
[direction]	Sets the direction of the slider element. Can be either horizontal, or vertical. Default: horizontal
[range]	The slider element can either pick a single value, or a range. Default: false
[minValue]	The sliders minimum value. Default: 0
[maxValue]	The sliders maximum value. Default: 100
[value1] or [value]	The sliders initial set value. Use value1 when you are creating a range slider. Default: 0
[value2]	The second value, when selecting a range. Default: 0
[step]	Define here, which steps are used between values on the slider. For example 0.1, 1 or 10. Default: 1
[model]	Set a Backbone Model here to bind the sliders value(s) to a Backbone.Model property (type should be numeric).
[modelKey] or [modelKey1]	This, or a value function is mandatory for using the model parameter. This is the string key of the models property to use for the first slider value.
[modelKey2]	This, or a value function is mandatory for using the model parameter. This is the string key of the models property to use for the second slider value.
[className]	A string with custom CSS classes to apply to the generated DOM element
[dataAttributes]	A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example {count: 1} becomes data-count="1" on the DOM element.
[el]	The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter.
[showEffect]	The default show effect for the element. See associated property description. Default: null
[hideEffect]	The default hide effect for the element. See associated property description. Default: null

Properties

valueBool

Can be used to retrieve the current check status of the object.

Inherited Properties from modo.Element

elObject

Contains the jQuery enhanced DOM Node of this modoJS element.

modoIdNumber

Contains a internally given, numeric ID for this element.

visibleBool

Will be set by .show() and .hide(). Access this property to check the current visibility of the element.

showEffectobject

Set a default show effect (like the options you can pass to the show() / hide() methods.

Example:

element.showEffect = {
    effect: 'slideDown',
    effectArgs: ['fast']
};

hideEffectobject

Define a default hide effect instead of a simple, instant hide.

Methods

get()number/array

Returns the numeric value the slider has been set to. Will return an array with two numeric values if the element is a range slider.

set(values)this

Pass a numeric value to set the sliders value. Pass an array with two numeric values to set the two values of a range slider.

setMin(value)this

Pass a numeric value to set the sliders minimal selectable value.

setMax(value)this

Pass a numeric value to set the sliders maximal selectable value.

disable()this

Will disable the element for user interactions.

enable()this

Re-enables the element for user interactions if it previously has been disabled.

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.

---

Note: All modoJS Objects are extended with all methods of the Backbone.Events class.

---

Events

change

Triggered whenever the user interacts with the element to set a new value.

disabled

Triggered, when the element has been disabled.

enabled

Triggered, when the element has been enabled.

Inherited Events from modo.Element

show

Triggered, when the object has been displayed through show()

hide

Triggered, when the object has been hidden through hide()

CSS Classes

mdo-slider

Applied directly to the slider element.

mdo-slider-vertical

Applied to the slider element, when it should be rendered vertically instead of horizontally.

mdo-slider-range

Applied to the slider element, when it should be a range slider.

mdo-slider-value

Applied to the sliders value indicator.

mdo-slider-plug1

Applied to the sliders first moveable plug.

mdo-slider-plug2

Applied to the sliders second moveable plug (appears on range sliders).

Inherited CSS Classes from modo.Element

mdo-element

Basic class that will be applied to every element that extends modo.Element.

mdo-flexible

Will be applied to every modo element where setFlexible(true) has been called upon.