Slider Component

Properties

colorLeft
  Specifies the color of the slider bar to the left of the thumb as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string, i.e., 0xAARRGGBB. An alpha of 00 indicates fully transparent and FF means opaque.
Data type: color
Designer Writable true <slider name="sliderName" colorLeft="FFad86aa">
Code Writeable true sliderName.colorLeft = "FFad86aa"
Code Readable true let variable = sliderName.colorLeft

colorRight
  Specifies the color of the slider bar to the right of the thumb as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string, i.e., 0xAARRGGBB. An alpha of 00 indicates fully transparent and FF means opaque.
Data type: color
Designer Writable true <slider name="sliderName" colorRight="FF006f16">
Code Writeable true sliderName.colorRight = "FF006f16"
Code Readable true let variable = sliderName.colorRight

heightPercent
  Specifies the Slider's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true sliderName.heightPercent = 25
Code Readable false

maxValue
  Sets the maximum value of slider. 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.
Data type: number
Designer Writable true <slider name="sliderName" maxValue="100">
Code Writeable true sliderName.maxValue = 100
Code Readable true let variable = sliderName.maxValue

minValue
  Sets the minimum value of slider. 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.
Data type: number
Designer Writable true <slider name="sliderName" minValue="1">
Code Writeable true sliderName.minValue = 1
Code Readable true let variable = sliderName.minValue

thumbEnabled
  Whether or not the slider thumb is being be shown.
Data type: boolean
Designer Writable true <slider name="sliderName" thumbEnabled="true">
Code Writeable true sliderName.thumbEnabled = true
Code Readable true let variable = sliderName.thumbEnabled

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.
Data type: number
Designer Writable true <slider name="sliderName" thumbPosition="23">
Code Writeable true sliderName.thumbPosition = 23
Code Readable true let variable = sliderName.thumbPosition

visible
  Specifies whether the Slider should be visible on the screen. Value is true if the Slider is showing and false if hidden.
Data type: boolean
Designer Writable true <slider name="sliderName" visible="true">
Code Writeable true sliderName.visible = true
Code Readable true let variable = sliderName.visible

width
  Specifies the horizontal width of the Slider, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true sliderName.width = 260
Code Readable true let variable = sliderName.width

widthPercent
  Specifies the horizontal width of the Slider as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true sliderName.widthPercent = 85
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <slider name="sliderName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <slider name="sliderName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <slider name="sliderName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
positionChanged Indicates that position of the slider thumb has changed.
sliderName.addEventListener(
    "positionChanged",
    function (thumbPosition) {
        //Your code here
    }
)
thumbPosition number