Slider widget

Here are the steps to make use of the Slider widget:

  • Place the slider widget onto the design view , choosing the horizontal type, and adjusting the widget’s size as needed.

  • The slider widget includes three default layers: Default Track, Filled Track and Knob. Customize these layers by adding images - use the Progress Bar background image for the Default Track and the fill bar image for the Filled Track.

Slider Widget - Horizontal :width: 100%

Slider Widget - Horizontal

  • Navigate to the Advanced tab within the Properties section. In the filled track layer, under Dimensions, set the Width mode to Fixed and map the Widget Data to the Width option.(For vertical types, adjust the Height mode accordingly.)

Filled Track Layer Properties :width: 100%

Filled Track Layer Properties

  • In the Knob layer , under Dimensions, set the Width mode to Wrap and map the Widget Data to the X Offset option.

Knob Layer Properties :width: 100%

Knob Layer Properties

  • Create a data variable in the EFD, specifying a range from 0 to 100.

Data Variable

Data Variable

  • Map this data variable to the ‘Cur value’ under Advanced properties in the Properties section.

Mapping Data Variable

Mapping Data Variable

  • Export and simulate the project. Dragging the knob can lead to variations in the slider fill, providing an interactive representation.

Slider in Simulation

Slider Simulation