Skip to main content

Slider component scripting

This document details how to control Slider component using JavaScript.

Interacting with the Slider from JavaScript

Typically, you will be using an mwf library or you will define an mwf global variable to access a component or module object. This can vary based on the distribution library you are using. In either case, you will need to initialize the component/module object as described here. Once you have the name of the initialized component/module, you can interact with it through your code. For example, you can use the following sample code to create a new slider instance.

NOTE: Always provide a unique selector to target a single component or module.


var mySliderHtmlElement = document.querySelector('.c-slider');
var mySliderComponent;
 
mwf.ComponentFactory.create([ {
                    c: mwf.Slider,
                    elements: [ mySliderHtmlElement ],
                    callback: (results: mwf.Slider[]): void => {
                        if (results && results.length) {
                             mySliderComponent= results[ 0 ];
                             }
                    },
                    eventToBind: 'DOMContentLoaded'
                }]);

The create method shown here will create a new component if the component is not already initialized or return back a component that is already initialized on the selector specified html element.

Properties

The slider object has two available properties.

Properties
Property Parameters Return
resetSlider
(Resets the slider from the specified values.)
min - The new min value (type: number)
max - The new max value (type:number)
value - The optional new value. If omitted, the current value is preserved and range constrained. (type: number)
step - The optional new step value. If omitted, step default is set = range/10. (type: number)
(min, max, value, step, {boolean})
Boolean returns true if the slider was successfully reset from the specified values, otherwise false.
setValue
(Sets the slider's value to the specified value.)
value - The new value. (type: number) True if the slider's value was successfully updated to the specified value, otherwise false.

Issue: Set the slider value

You can set the value of the slider programmatically. This might be desirable to set its initial setting value. For example, to set the slider to a value of 7:


if(mwfSliderComp) {
    mwfSliderComp.setValue(7);
}

Issue: Reset the slider values

You can reset all of the slider's parameters programmatically. This is useful for setting its default values. For example, if you want the slider to have a minimum value of 1, a maximum value of 10, an initial value of 3, and a step increment value of 1:


if(mwfSliderComp) {
    mwfSliderComp.resetSlider(1, 10, 3, 1);
}

Issue: Subscribe a callback for any slider value change

After you have initiated the slider component as described above, you can subscribe to a callback notice for any change to the slider's value (i.e. the onValueChanged event). For example:


if (mwfSliderComp) {
    // subscribe to the mwfSliderComp instance defined above
    mwfSliderComp.subscribe({
        onValueChanged: function (notification) {
            // custom callback goes here
            console.log(notification.value);
        }
    });
}

Events

The following event notifications are available for subscription:

  • onValueChanged — Data array: value [number], internal [boolean], userInitiated [boolean]

More information about notifications can be found on the Event Notification page. While some DOM events are blocked by this control, the use of other DOM events is possible, but not recommended and developers who chose to do so are fully responsible for the functional consequences. The reasons for this are also discussed on the Event Notification page.