User Interface

User Interface (UI) refers to the visual and interactive elements of a digital system or application that enable users to interact with and control it.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 2.0.0
  •  API 21, Android 5.0 Lollipop
  •  23 Blocks Available

Slider

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.

Overview

A visible component that works as a progress bar with a draggable thumb.

Events

Image Description
Events

PositionChanged

  • Indicates that position of the slider thumb has changed.

    • # Name Type(s) Default Value
    1 thumbPosition Integer -
    Image Description
    Events

    TouchDown

  • Event triggers when invoked on a touch down.

    • Image Description
    Events

    TouchUp

  • Event triggers when it is on a touch Up.

    • Methods

    Image Description
    Methods

    SetMargin

  • The space outside a component, between the component’s boundary and other components. It determines the distance between different UI elements.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0
    Image Description
    Methods

    SetPadding

  • The padding around the check box. Padding is the space inside the border.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0

    Properties

    Image Description
    Image Description
    Properties

    ColorLeft

  • The color to the left of the thumb.

    • # Name Type(s) Default Value
    1 ColorLeft color #FFC800FF
    2 SetColorLeft color
    Image Description
    Image Description
    Properties

    ColorRight

  • The color to the right of the thumb.

    • # Name Type(s) Default Value
    1 ColorRight color #888888FF
    2 SetColorRight color
    Image Description
    Image Description
    Properties

    MaxValue

  • The maximum value of the slider.

    • # Name Type(s) Default Value
    1 MaxValue Integer 50.0
    2 SetMaxValue Integer
    Image Description
    Image Description
    Properties

    MinValue

  • The minimum value of the slider.

    • # Name Type(s) Default Value
    1 MinValue Integer 10.0
    2 SetMinValue Integer
    Image Description
    Image Description
    Properties

    ThumbEnabled

  • Whether or not the thumb should be shown on the track.

    • # Name Type(s) Default Value
    1 ThumbEnabled boolean true
    2 SetThumbEnabled boolean
    Image Description
    Image Description
    Properties

    ThumbPosition

  • The position of the slider thumb.

    • # Name Type(s) Default Value
    1 ThumbPosition Integer 30.0
    2 SetThumbPosition Integer
    Image Description
    Image Description
    Properties

    Width

  • The width of the slider in pixels.

    • # Name Type(s) Default Value
    1 Width Integer -1
    2 SetWidth Integer
    Image Description
    Properties

    WidthPercent

  • Sets the width of the slider as a percentage of the screen width.

    • # Name Type(s) Default Value
    1 SetWidthPercent Integer
    Image Description
    Image Description
    Properties

    Visible

  • Whether the slider is visible on the screen.

    • # Name Type(s) Default Value
    1 Visible boolean true
    2 SetVisible boolean