Mojo.Widget.ProgressSlider

Namespace Detail

Overview

For media, or other applications where you want to show progress as part of a tracking slider, the Progress Slider is an ideal choice. Combining the Slider widget with the Progress Pill almost gives you both widgets in one, but not all of the options are represented.

Declaration

<div x-mojo-element="ProgressSlider" id="progresssliderId"
  class="progresssliderClass" name="progresssliderName"></div>

Properties Required Value Description
x-mojo-element Required ProgressSlider Declares the widget as type 'ProgressSlider'.
id Required Any String Identifies the widget element for use when instantiating or rendering.
class Optional Any String Provide your own unique class and override the framework's styles.
name Optional Any String Adds a unique name to the ProgressSlider widget; generally used in templates.

Events

Mojo.Event.listen(this.controller.get("progresssliderId"),
  Mojo.Event.propertyChange, this.handleUpdate);

Event Type Value Event Handling
Mojo.Event.propertyChange {value: pos}
Mojo.Event.progressComplete Progress is complete.

Instantiation

this.controller.setupWidget("progresssliderId",
  this.attributes = {
      property: "value",
      round: true,
      maximumValue: 100,
      mininumValue: 0
  },
  this.model = {
      value: 20
  }
); 

Attribute Properties

Attribute Property Type Required Default Description
sliderProperty String Optional "slider" Name of model property for this widget instance for the slider position
progressProperty String Optional "progress" Name of model property for this widget instance for the progress bar position
progressStartProperty Integer Optional Null Starting position of the progress bar
minValue Integer Required Minimum slider value, returned at leftmost position
maxValue Integer Required Maximum slider value, returned at rightmost position
round Boolean Required Round the value returned to the nearest integer.
cancellable Boolean Required If true, progress cancel option is shown.
updateInterval Integer Optional 0 If >0, will send updates every updateInterval seconds.

Model Properties

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

Methods

To invoke a method on a widget, use the scene controller's get method for the desired widget, and append mojo followed by the method.

Example:

this.controller.get('myWidget').mojo.getValue()

Method Arguments Description
reset Resets the progress to 0.