Mojo.Widget.Slider

Namespace Detail

Overview

The Slider presents a range of selection options in the form of a horizontal slider with a control knob that can be tapped and dragged to the desired location. You must specify minimum (leftmost) and maximum (rightmost) values for the slider; you can optionally specify intermediate choices that will trigger additional behavior.

Declaration 

<div x-mojo-element="Slider" id="sliderId" class="sliderClass"
  name="sliderName"></div>
Properties Required Value Description
x-mojo-element Required Slider Declares the widget as type 'Slider'
id Required Any String Identifies the widget element for use when instantiating or rendering.
class Optional Any String Slider uses .palm-slider-container by default, but you can override this setting.
name Optional Any String Adds a unique name to the Slider widget; generally used in templates.

Events 

Mojo.Event.listen(this.controller.get("sliderId"),
  Mojo.Event.propertyChange, this.handleUpdate);
Event Type Value Event Handling
Mojo.Event.propertyChange {value: pos}

Instantiation 

this.controller.setupWidget("listselectorId",
  this.attributes = {
      minValue: 0,
      maxValue: 100
  },
  this.model = {
      value: 3,
      disabled: false
  }
);

Attribute Properties

Attribute Property Type Required Default Description
modelProperty String Optional value Model property name for slider state
minValue Integer Required Starting value, or leftmost value on slider
maxValue Integer Required Ending value, or rightmost value on slider
round Boolean Optional FALSE If true, will round the slider value to the nearest integer; if 1, will be used for starting value.
updateInterval Integer Optional 0 If >0, will send updates every updateInterval seconds.

Model Properties

Model Property Type Required Default Description
value Integer Required none Value of widget; this will be sanitized to be between minValue and maxValue.

Methods

The Slider widget has no methods.