Slider Horizontal

Use the
Slider Horizontal
 graphic element to build an application using slider control. The
Slider Horizontal
graphic element appears in the
CommonControls
category of the
Toolbox
.
Built-in-Animation Properties
Built-in animation properties appear under the
General
category of the
Properties
window. Specify values for these properties in order to animate the graphic element or change the information the graphic element shows on the HMI device.
NOTE: The Value property of the slider is always treated as a floating point value, even if the slider limits are set to 0 and 1 and the slider Value property is bound to a BOOL tag.
Property
Category
Purpose
Accepted Values
Value
General
Specifies the value of the graphic element
Bound tag
MinValue
General
Specifies the minimum value on the graphic element
Any numeric value less than the MaxValue property value.
MaxValue
General
Specifies the maximum value on the graphic element
Any numeric value greater than the MinValue property value.
Write Mode
General
Specifies when the control updates the value tag
Continuous Update
 - Updates the tag bound to the value property while dragging the slider thumb along the track
Update on Release
 - Updates the tag bound to the value property after releasing the slider thumb.
Unique Properties
Unique properties are not shared by all graphic elements in
Toolbox
.
Name
Category
Purpose
Accepted Values
CornerRadius
Appearance
Specifies the curve of button corners.
Zero or a positive number.
UsePredefinedDisabled
Appearance
Specifies the crosshatch overlay on disabled graphic element.
True or false
FillColor
Appearance
Specifies the fill color.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
BorderColor
Appearance/Border
Specifies the border color of the graphic element.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
BorderStyle
Appearance/Border
Specifies the border style for the graphic element.
  • Any selected Line style -- None, Solid, Dash, Dot, Dash Dot, or Dash Dot Dot
  • Any selected Cap style -- Flat, Round, or Square
  • Any selected Join style -- Miter, Bevel, or Round
BorderWidth
Appearance/Border
Specifies the border width for the graphic element.
  • None
  • 1 pixel
  • 2 pixels
  • 4 pixels
  • 8 pixels
ThumbStyle
Appearance/Thumb
Specifies the appearance of the slider thumb.
  • Square
  • Octagon
  • Diamond
  • Circle
ThumbFillColor
Thumb
Specifies the fill color for the slider thumb.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
ThumbBorderColor
Thumb
Specifies the border color for the slider thumb.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
ThumbThickness
Thumb
Adjusts the size of the thumb width along the track.
Zero or a positive number.
TrackVisible
Track
Specifies visibility of the slider track element.
Enable or Disable
TrackFillColor
Track
Specifies the fill color for the slider track.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
TrackBorderColor
Track
Specific the border color for the slider track.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
TrackThickness
Track
Specifies the relative thickness of the slider track.
The percentage (0 to 100) of the height for Slider Horizontal or the percentage of the width for Slider Vertical.
TrackCornerRadius
Track
Specifies the curve of the track.
Zero or a positive number
LimitVisible
Track
Specifies the visibility of the range between the
LowLimit
 and
HighLimit
 .
Enable or Disable
LowLimit
Track
Specifies the
LowLimit
 value between the
MinValue
 and
MaxValue
.
Any numeric value less than the HighLimit.
HighLimit
Track
Specifies the
HighLimit
 value between the
MinValue
 and
MaxValue
.
Any numeric value greater than the
LowLimit
.
LimitFillColor
Track
Specifies the fill color for the range between the
LowLimit
 and
HighLimit
 .
Tip:
 Enable
TrackVisible
and
LimitVisible
before configuring
LimitFillColor
. The
LimitFillColor
 property goes inactive after disabling
TrackVisible
and
LimitVisible
.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
OutofLimitFillColor
Track
Specifies the fill color for the thumb and a portion of the track when the
LowLimit
 and
HighLimit
 are outside the
MinValue
 and
MaxValue
 range.
Tip:
 Enable
TrackVisible
and
LimitVisible
 before configuring
LimitFillColor
. The
OutofLimitFillColor
 property goes inactive after disabling
TrackVisible
and
LimitVisible
.
Any selected color in the
Color Picker
 or a Hex color value entered manually. The Hex value must be in the format #RRGGBB. R, G, and B are Hex digits from 0 through F and represent the color channel values for red, green, and blue. For example, #ffff00 produces yellow.
Common Properties
Common properties exist for all graphic elements.
Property
Category
Purpose
Accepted Values
Access
Security
Specifies if all users have access to the control element, or if access is inherited from the screen.
  • Inherit - Access inherited from screen.
  • Full Access - Access granted to all users.
Angle
Position and Size
Specifies the rotation angle.
Enter 180 to display the graphic element upside down. If you enter a value larger than 360, the portion of numeric value that is over 360 becomes the value. For example, enter 380 to see a value of 20. If you enter a value less than 0, the negative value is subtracted from 360. For example, enter -30 to see a value of 330.
  • Numbers 0 to 360
Enabled
Appearance
Specifies if the graphic element is available on the HMI device and if the graphic element accepts touch and key input.
  • Enabled - selected
  • Not Enabled - cleared
Height
Position and Size
Specifies the height in pixels.
Any positive numeric value
Opacity
Appearance
Specifies the transparency of the graphic element.
0 (fully transparent) - 100 (fully opaque)
Visible
Appearance
Specifies if the graphic element is visible on the HMI device.
  • Visible - selected
  • Not visible - cleared
Width
Position and Size
Specifies the width in pixels.
Any positive number
X
Position and Size
Specifies the horizontal coordinate, in pixels, from the upper left corner of screen to the upper left corner of a graphic element or group with no rotation. If the graphic element or group is rotated, the X property value does not change.
Any positive number
Y
Position and Size
Specifies the vertical coordinate, in pixels, from the upper left corner of screen to the upper left corner of a graphic element or group with no rotation. If the graphic element or group is rotated, the Y property value does not change.
Any positive number
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal