Back

addSlider

JS Py

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

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()
    }
}

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 Run

Example - Slider steps and marks

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
    }
}

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 Run

Example - Slider with custom step marks

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
    }
}

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 Run

Example - Vertical slider

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()
    }
}

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 Run

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()

Boolean: The marks on the Slider Component.

Number: The initial value of the Slider. Value must be between `0-100`, the default min and max values.

Number: Fraction of the parent width `[0-1]`.

Number: Fraction of the parent height `[0-1]`.

Number: The time in milliseconds.

Number: The z-index. A negative value behaves like `sendBackward` method.

Number: The z-index. A positve value behaves like `bringForward` method.

Number: Border-left thickness in pixels.

Number: Border-top thickness in pixels.

Number: Border-right thickness in pixels.

Number: Border-bottom thickness in pixels.

Number: Top-Left border radius.

Number: Top-Right border radius.

Number: Bottom-Right border radius.

Number: Bottom-Left border radius.

Number: Left margin. You can also pass string e.g. `12rem`

Number: Top margin. You can also pass string e.g. `12rem`

Number: Right margin. You can also pass string e.g. `12rem`

Number: Bottom margin. You can also pass string e.g. `12rem`

Number: Fraction of the component width.

Number: Fraction of the component height. [0-1]

Number: Fraction of the component width. [0-1]

Number: Fraction of the parent width. [0-1]

Number: Fraction of the parent height. [0-1]

Number: Minimum value of the slider.

Number: Maximum value of the slider.

Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.

Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.

String: “A comma separated options.
Theme Color: `Primary`”, “ `Secondary`
Orientation: `Horizontal`”, “ `Vertical`
Track: `Normal`”, “ `Inverted`”, “ `False`”

String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”

String: “The mode of the measurements. Values can be `px` or `%`”

String: “Border color in hexadecimal format `#rrggbb`.”

String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”

String: “Unit of measurement. Values are `px` `rem` or `%`.”

String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”

String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”

String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”

Object: The layout where to add the Slider Component.

Object: The pointer event object.

Object: The position of the touch event.

function( value )

function( event )

function( pos )

sld.absHeight
Returns the absolute height of the control in pixels.

sld.absLeft
Returns the absolute distance of the control from the left in pixels.

sld.absTop
Returns the absolute distance of the control from the top in pixels.

sld.absWidth
Returns the absolute width of the control in pixels.

sld.animate
Animate the component.

sld.backColor
A hexadecimal color of the form #rrggbb

sld.backImage
The path to your image file.

sld.border
Sets or returns the border thickness in pixels.

sld.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb

sld.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.

sld.bringForward
Bring this component forward by a given z-index.

sld.color
Sets or returns the theme color of the Slider. Values can be Primary or Secondary

sld.cornerRadius
Sets or returns the corner radius in pixels.

sld.destroy
Destroy the component.

sld.disabled
Sets or returns the disabled state of the control.

sld.el
Returns the html container element for the control.

sld.elStyle
Sets the style of the html container element.

sld.fontFile
Sets or returns the relative path to the font-family use.

sld.getMarks
Returns the step marks of the Slider Component. See setMarks methods for possible values.

sld.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}

sld.gone
Destroy the component.

sld.height
Sets or returns the height of the control as a fraction of the parent control.

sld.hide
Hide the component.

sld.isVisible
Returns whether the control is visible or not.

sld.left
Returns the distance of the control from the left.

sld.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.

sld.marks
Sets or returns the marks on the Slider Component. The marks will be base on the step property. To add a custom labels in each mark, pass an array with an object element with properties label and value. See marks array example below.

sld.maxValue
Sets or returns the maximum value.

sld.minValue
Sets or returns the minimum value.

sld.opacity
Sets or returns the opacity of the control.

sld.options
Sets or returns the options of the control.

sld.orientation
Sets or returns the orientation of the Slider Component. Values can be Vertical or Horizontal

sld.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.

sld.parent
Returns the parent layout control.

sld.position
Returns the position of the control. The returned object has left top right and bottom props.

sld.rotation
Sets or returns the angle of rotation in degrees.

sld.sendBackward
Bring this component backward by a given z-index.

sld.setBorder
Sets the border line for the component container.

sld.setCornerRadius
Sets the corner radius of the component.

sld.setMargins
Sets the margin of the component.

sld.setMarks
Sets the marks of the Slider Component.
If value is Boolean the marks is base on the step.
If the value is Array, the elements must be an object of the form { label, value } where label is a string and value is a number within the range.

sld.setOnChange
Sets a callback function when the value of the Slider Component changes.

sld.setOnContextMenu
Adds a callback function on right click.

sld.setOnSelect
Sets a callback function when a final value is selected. This is equal to submit value event.

sld.setOnTouch
Adds an event handler when the Slider component is touch.

sld.setPadding
Sets the padding of the component's container.

sld.setPosition
Sets the position of the component relative to its parent dimensions.

sld.setRange
Sets a range value for the Slider Component.

sld.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.

sld.setSize
Sets the size of the component.

sld.show
Show the component.

sld.step
Sets or returns the Sider Component steps.

sld.textColor
Sets or returns the color of the text.

sld.textSize
Sets or returns the size of the text within the control.

sld.top
Returns the distance of the control from the top.

sld.track
Sets or returns the track properties of the Slider Component. Values can be Normal False or Inverted

sld.type
Returns the type of the control.

sld.value
Sets or returns the value of the Slider Component.

sld.valueLabelDisplay
Sets or returns the value label display type. Values can be on auto off. If on, value label will always be shown. If auto, value label will be shown when sliding is active. If false, value label display will not be shown.

sld.visibility
Sets or returns the visibility of the control.

sld.width
Sets or returns the width of the control as a fraction of the parent control.