This module allows adding a slider to exercises. The users either slide the image from one position to another or mouse-click on the position they wish to move an image (slider) to.


The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
ImageElement An image which serves as a slider
Orientation Addon can be used in either horizontal ("Landscape") and vertical ("Portrait") orientation
Stepwise If you want to set number of steps of slider then this option must be checked
StepsCount Number of steps in Stepwise mode
Initial Initial slider position (from 1 to StepsCount)
onStepChange Event triggered on step change
Block in error checking mode If this option is selected, addon will not respond to touch/mouse gestures and commands in error checking mode
Continuous events If this option is selected, events will be sent in a continuous way.
Continuous events steps

    This option is available if the "Continuous events" property is selected.

  • Stick: slider will snap to steps.
  • Smooth: slider will not snap to steps.
Stepwise mode bar always visible If this option is selected, the "Stepwise" bar will be visible in editor's mode and normal run. If this option is deselected, bar will be visible only in editor's mode.

Supported commands

Command name Params Description
nextStep* --- Move slider to next position if possible
previousStep* --- Move slider to previous position if possible
moveToFirst* --- Move slider to first position
moveToLast* --- Move slider to last position
moveTo* step Move slider to given position (from 1 to StepsCount)
moveToInitialStep* --- Move slider to initial position
getCurrentStep --- Returns current slider position (from 1 to StepsCount). Returned value is a string!
hide --- Hides addon
show --- Shows addon

Commands marked with '*' have additional parameter which can disable sending events to Event Bus (helpful when in Advanced Connector user wants to manipulate one Slider from another). To disable sending events just add 'false' parameter (with single quotes characters) like in example below.

    var sliderModule = presenter.playerController.getModule('Slider1');
    sliderModule.moveTo(2, 'false');;

Advanced Connector integration

Each command supported by the Slider addon can be used in the Advanced Connector addon's scripts. The below example shows how to display the hidden module and move it to step 2.

    var sliderModule = presenter.playerController.getModule('Slider1');


The Slider addon sends ValueChanged type events to Event Bus when a step is changed. On every step change the addon sends two events - one for leaving a current step and other for entering a new one.

Field name Description
Item Step number
Value 1 for entering step, 0 for leaving it
Score N/A

CSS classes

Class name Description
slider-wrapper DIV surrounding the slider element. Slider element is a direct child of this element
disabled Additional class for 'slider-wrapper' element added in Error Checking mode when Slider is disabled (via adequate property in Model)
slider-element-image Image elements which serve as a slider
slider-element-image-mouse-hover Image elements which serves as a slider with mouse over it
slider-element-image-mouse-click Image elements which serves as a slider when a mouse click is on it
slider-stepwise-bar Class for the bar represented by canvas element when the Stepwise property is selected

Demo presentation

Demo presentation contains examples on how to use the Slider addon and integrate it with other addons, i.e. Image Viewer or Video.