Custom Control: Slider

A slider is a graphical representation of the value within a specified range and a setter of that value. The range is defined by setting the minimum and maximum extreme values in the properties. A Thumb element reflects its current value and is draggable. Moving the thumb sends a value over the connection channel to the PLC. Together with the bar graph, the slider belongs to the bar control group, for which the same properties apply. Note that the barPath starts at the left corner and is covered by barFill.

Custom Control: Slider

CS3

Binding types: Number (INT, REAL,...)

SVG Elements

id = "thumb"

  • Must be a "circle" - or "group" - object (SVG) (the group must contain an invisible circle)
  • The center (thumb width / 2 is the coordinate) of the thumb represents a current variable value
  • The thumb can also be a transparent element, but it must be present in the SVG

id = "barPath"

  • Must be a "rect" (SVG) object
  • barPath defines the borders for the thumb it can move
  • It can be used as background or as transparent element (to define only the edges of the thumb movement)

id = "barFill"

  • Is the graphical representation of a variable value. In spans from the minimum defined value to the current variable value and fills the space between these 2 points
  • When the variable changes, the position of the thumb changes accordingly and the bar fill is based on the center point of the thumb
  • barFill is not required and can be omitted

Example

You can find a complete SVG example here.

Conclusion

The main elements "thumb" and "barPath" are essential, the element "barFill" is optional.