Slider Widget

General Setting
User can change following things in Slider widget:
Name for widget which will be used data referenceFor Example, if widget name is 'Slider', then data of widget is referenced as Slider.data
Show title - User can show/hide widget title
Title Color
Background Color
Configure Slider Widget
Widget Setting
In Widget Setting option, user can change following parameters:
Key - key parameter of JSON Object which will define value of Slider.
Min -  Minimum value for Slider widget
Max - Maximum value for Slider widget
Step Size - Size of each step of Slider widget. For example, if step size is 2, slider value will  increment by 2 with each step. 
Configure Slider Widget
Source
User can select a source mode as MQTT or Action.
Using MQTT
Here, to change value of Slider widget user can publish JSON object on given sliderData MQTT topic. No need to provide <account_id> while providing the MQTT topic. The JSON object will be as below.
//Example 
​
{
    "sliderKey":60
}   
​
// 'sliderKey' is set as key in widget form.
Configure Slider Widget
Using Action
Here, to change value of Slider widget, output of the action should contain key-value pair with 'sliderKey' key. User can also update the widget either onLoad or periodically by providing refresh interval.
Configure Slider Widget
Event Handling
Button onClick event is provided. User can choose MQTT or Action mode for onClick event.
Using MQTT
User needs to provide following parameters:
event - Select OnChangeSubmitted event from dropdown
mode - Select mode as MQTT
topic - Enter topic name directly. No need to provide accountID.
Data parameters - Add new data parameter item. Each data parameter item represent a key-value pair. So select required parameter and give key name to it.
As shown in below images, for onChangeSubmitted event, MQTT mode is selected. It means when the slider value gets changed, it will publish configured data parameters on given MQTT topic.​
Slider Widget - Event Handling using MQTT
Slider Widget - Event Handling using MQTT
So, as per the configuration shown in above images, when the slider value changes, JSON object with speed-Slider.data as key-value pair gets published on data topic.
Using Action
User needs to provide following parameters:
event - Select onChangeSubmitted event from dropdown
mode - Select mode as action
Action ID - Select required Action ID from dropdown
As shown in below images, for onChangeSubmitted event, action mode is selected. It means when user slider value is changed, it will trigger given Action with configured action parameters.
Slider Widget - Event Handling using Action
Slider Widget - Event Handling using Action
Example
If we configure Slider Widget as below:
1.key - sliderKey
2.Min - 0
3.Max -100
4.Step Size - 1
and set source type for widget as MQTT and topic configured is 'data'. And if we publish following JSON Object over 'data' topic then Slider Widget will look as shown in image.
// Data over configured MQTT Topic
​
{ 
    "sliderKey":55
}
Slider Widget Example
Last modified 1yr ago