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. 1.
    key - sliderKey
  2. 2.
    Min - 0
  3. 3.
    Max -100
  4. 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
Copy link
Outline