Slider

Last Updated On 2021-07-16

A Slider is a progress bar that adds a draggable thumb. You can touch the thumb and drag left or right to set the slider thumb position. As the Slider thumb is dragged, it will trigger the PositionChanged event, reporting the position of the Slider thumb. The reported position of the Slider thumb can be used to dynamically update another component attribute, such as the font size of a TextBox or the radius of a Ball.

Properties

You can set the below properties in the UI part of the builder.

ColorLeft - it's a color value which is set to &hffffc800 by default.
ColorRight - it's a color value which is set to &hff888888 by default.
HeihMargin - it's a four value which is set to 0,0,0,0 by default.
HeihPadding - it's a four value which is set to 0,0,0,0 by default.
MarginBottom - it's a non negative float value which is set to 0 by default.
MarginLeft - it's a non negative float value which is set to 0 by default.
MarginRight - it's a non negative float value which is set to 0 by default.
MarginTop - it's a non negative float value which is set to 0 by default.
MaxValue - it's a float value which is set to 50.0 by default.
MinValue - it's a float value which is set to 10.0 by default.
PaddingBottom - it's a non negative float value which is set to 0 by default.
PaddingLeft - it's a non negative float value which is set to 0 by default.
PaddingRight - it's a non negative float value which is set to 0 by default.
PaddingTop - it's a non negative float value which is set to 0 by default.
ThumbEnabled - it's a boolean value which is set to true by default.
ThumbPosition - it's a float value which is set to 30.0 by default.
Visible - it's a visibility value which is set to true by default.

Block Properties

You can set the below blocks properties in the blocks section of the builder.

ColorLeft

The color of slider to the left of the thumb.

ColorRight

The color of slider to the right of the thumb.

HeightPercent

Specifies the vertical height of the Slider as a percentage of the height of the Screen.

MarginBottom

Property for MarginBottom

MarginLeft

Property for MarginLeft

MarginRight

Property for MarginRight

MarginTop

Property for MarginTop

MaxValue

Sets the maximum value of slider. Changing the maximum value also resets Thumbposition to be halfway between the minimum and the (new) maximum. If the new maximum is less than the current minimum, then minimum and maximum will both be set to this value. Setting MaxValue resets the thumb position to halfway between MinValue and MaxValue and signals the PositionChanged event.

MinValue

Sets the minimum value of slider. Changing the minimum value also resets Thumbposition to be halfway between the (new) minimum and the maximum. If the new minimum is greater than the current maximum, then minimum and maximum will both be set to this value. Setting MinValue resets the thumb position to halfway between MinValue and MaxValue and signals the PositionChanged event.

PaddingBottom

Property for PaddingBottom

PaddingLeft

Property for PaddingLeft

PaddingRight

Property for PaddingRight

PaddingTop

Property for PaddingTop

ThumbEnabled

Sets whether or not to display the slider thumb.

ThumbPosition

Sets the position of the slider thumb. If this value is greater than MaxValue, then it will be set to same value as MaxValue. If this value is less than MinValue, then it will be set to same value as MinValue.

Visible

Specifies whether the Slider should be visible on the screen. Value is true if the Slider is showing and false if hidden.

Width

Specifies the horizontal width of the Slider, measured in pixels.

WidthPercent

Specifies the horizontal width of the Slider as a percentage of the width of the Screen.

Events

You can set the below event blocks in the blocks section of the builder.

PositionChanged

Indicates that position of the slider thumb has changed.