Material Components

Material Components are modular, meaning developers can pick and choose specific UI elements (such as buttons, cards, text fields) based on their application's requirements. This modularity enhances flexibility and allows for easy integration into existing projects.

About the component


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

Material Slider

The Material Slider component in AB allows users to select a value within a range using a visual slider. It provides events that trigger on position changes and touch interactions (start, stop, down, up). Methods are available to set the slider's label, margin, and padding. The component offers extensive customization through properties, including colors for the left and right sides of the slider, the thumb, and the "holo" color, as well as the ability to adjust the height and width as percentages. The component also allows control over the min/max values, step size, thumb visibility, and position.

Overview

A visible component thats, created horizonntally and vertically navigation bar with animation.

Events

Image Description
Events

PositionChanged

  • Event triggered when the slider position changes.

    • # Name Type(s) Default Value
    1 position number
    2 fromUser boolean
    Image Description
    Events

    StartTrackingTouch

  • Event triggered when the user starts touching the slider.

    • Image Description
    Events

    StopTrackingTouch

  • Event triggered when the user stops touching the slider.

    • Image Description
    Events

    TouchDown

  • Event triggered when the user touches down on the slider.

    • Image Description
    Events

    TouchUp

  • Event triggered when the user lifts their finger from the slider.

    • Methods

    Image Description
    Methods

    SetLabel

  • Sets the label for the slider.

    • # Name Type(s) Default Value
    1 text string
    Image Description
    Methods

    SetMargin

  • Sets the margin for the slider.

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

    SetPadding

  • Sets the padding for the slider.

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

    Properties

    Image Description
    Image Description
    Properties

    ColorLeft

  • Gets the color of the left side of the slider.


  • Sets the color of the left side of the slider.

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

    ColorRight

  • Gets the color of the right side of the slider.


  • Sets the color of the right side of the slider.

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

    HeightPercent

  • Sets the height of the slider as a percentage of its parent's height.


    • # Name Type(s) Default Value
    1 percentage number
    Image Description
    Properties

    WidthPercent

  • Sets the width of the slider as a percentage of its parent's width.


    • # Name Type(s) Default Value
    1 percentage number
    Image Description
    Properties

    HoloColor

  • Sets the holo color of the slider.

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

    MaxValue

  • Gets the maximum value of the slider.

  • Sets the maximum value of the slider.

    • # Name Type(s) Default Value
    1 MaxValue number
    2 MaxValue number 100
    Image Description
    Image Description
    Properties

    MinValue

  • Gets the minimum value of the slider.

  • Sets the minimum value of the slider.

    • # Name Type(s) Default Value
    1 MinValue number
    2 MinValue number 0
    Image Description
    Image Description
    Properties

    StepSize

  • Gets the step size of the slider.

  • Sets the step size of the slider.

    • # Name Type(s) Default Value
    1 StepSize number
    2 StepSize number 1
    Image Description
    Image Description
    Properties

    ThumbColor

  • Gets the color of the slider thumb.

  • Sets the color of the slider thumb.

    • # Name Type(s) Default Value
    1 ThumbColor color
    2 ThumbColor color
    Image Description
    Properties

    TrackHeight

  • Sets the height of the slider track.

    • # Name Type(s) Default Value
    1 pixels number
    Image Description
    Image Description
    Properties

    ThumbEnabled

  • Gets whether the thumb is enabled.

  • Sets whether the thumb is enabled.

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

    ThumbPosition

  • Gets the position of the slider thumb.

  • Sets the position of the slider thumb.

    • # Name Type(s) Default Value
    1 ThumbPosition number
    2 ThumbPosition number
    Image Description
    Image Description
    Properties

    Width

  • Gets the width of the slider.

  • Sets the width of the slider.

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

    Visible

  • Gets whether the slider is visible.

  • Sets whether the slider is visible.

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