addSlider

Hello World

Content:
- Examples
- Properties
- Methods

A Slider in mobile UI design is a user interface element that allows users to select a value from a range by dragging a thumb along a track.

sld = ui.addSlider( parent, value, options?, width?, height? ) → ui object: Slider

Here are the methods available for Slider Component.

Examples

Example - Basic slider click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a slider control to the main layout with an initial value of 10
        this.sld = ui.addSlider(this.main, 10, "", 0.7)

        // Add a callback handler when the value of the slider changes
        this.sld.setOnChange( this.onChange )

        // Create a popup where to display values
        this.popup = ui.showPopup( 10 )
    }

    onChange( value )
    {
        this.popup.text = value
        this.popup.show()
    }
}

Copy All

Example - Slider steps and marks click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a slider control to the main layout with an initial value of 10
        this.sld = ui.addSlider(this.main, 10, "", 0.7)

        // Set the step to 10
        this.sld.step = 10

        // Add marks for every step
        this.sld.marks = true

        // Add a callback handler when the value of the slider changes
        this.sld.setOnSelect( this.onSelect )

        // Add a text control to show the selected value
        this.txt = ui.addText(this.main, "Value is 10")
    }

    onSelect( value )
    {
        this.txt.text = "Value is " + value
    }
}

Copy All

Example - Slider with custom step marks click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a slider control to the main layout with an initial value of 10
        this.sld = ui.addSlider(this.main, 10, "Primary", 0.7)

        // Set the step to 10
        this.sld.step = 10

        // Add custom marks for values at 10, 40 and 60
        this.sld.marks = [
            { label: "First", value: 10 },
            { label: "Second", value: 40 },
            { label: "Third", value: 60 }
        ]

        // Add a callback handler when the value of the slider changes
        this.sld.setOnSelect( this.onSelect )

        // Add a text control to show the selected value
        this.txt = ui.addText(this.main, "Value is 10")
        this.txt.margins = 0.02
    }

    onSelect( value )
    {
        this.txt.text = "Value is " + value
    }
}

Copy All

Example - Vertical slider click to expand contents

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a vertical slider control to the main layout
        this.sld = ui.addSlider(this.main, 10, "Vertical,Primary", 0.2, 0.7)

        // Add a callback handler when the value of the slider changes
        this.sld.setOnChange( this.onChange )

        // Create a popup where to display values
        this.popup = ui.showPopup( 10 )
    }

    onChange( value )
    {
        this.popup.text = value
        this.popup.show()
    }
}

Copy All

Properties

The following properties are available on the Slider object:

absHeight → Number

absLeft → Number

absTop → Number

absWidth → Number

backColor → String

backImage → String

border → Number

borderColor → String

borderStyle → String

color → String

cornerRadius → Number

disabled → Boolean

el → Object

elStyle → String

fontFile → String

height → Number

isVisible → Boolean

left → Number

margins → List

marks → Boolean

maxValue → Number

minValue → Number

opacity → Number

options → String

orientation → String

padding → List

parent → Object

position → Object

rotation → Number

step → Number

textColor → String

textSize → Number

top → Number

track → String

type → String

value → Number

valueLabelDisplay → String

visibility → String

width → Number

Methods

The following methods are available on the Slider object:

animate( anim, duration )

bringForward( zIndex )

destroy()

getMarks() → Boolean

getPosition( options ) → Object

gone()

hide()

sendBackward( zIndex )

setBorder( left?, top?, right?, bottom?, clr?, style? )

setCornerRadius( tl?, tr?, br?, bl?, mode? )

setMargins( left?, top?, right?, bottom?, mode? )

setMarks( val )

setOnChange( callback )

setOnContextMenu( callback )

setOnSelect( callback )

setOnTouch( callback )

setPadding( left?, top?, right?, bottom?, mode? )

setPosition( left, top, mode )

setRange( min?, max? )

setScale( x, y )

setSize( width, height, mode )

show()

Examples

Example - Basic slider click to expand contents

Example - Slider steps and marks click to expand contents

Example - Slider with custom step marks click to expand contents

Example - Vertical slider click to expand contents

Properties

Methods

loading