Back

addSlider

JS Py
Hello World
Content:
- Properties
- Methods

Adds a Slider Component into your App.

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

A Slider Component defines a control for selecting a number whose exact value must be within the range.

Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, steps and even marks.

Properties

These are the setter and getter properties for the addSlider Component.

absHeight
absLeft
absTop
absWidth
backColor
backImage
border
borderColor
borderStyle
color
cornerRadius
disabled
fontFile
height
isVisible
left
margins
marks
maxValue
minValue
opacity
options
orientation
padding
parent
position
rotation
step
textColor
textSize
top
track
type
value
valueLabelDisplay
visibility
width

Example - Marks array

var marks = [
        { label: "First stop", value: 10 },
        { label: "Second stop", value: 30 },
        { label: "Third stop", value: 70 }
    ]
marks = [label: "First stop", value: 10,label: "Second stop", value: 30,label: "Third stop", value: 70
    ]
Copy All       Run      

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      

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( width, clr, style )
setCornerRadius( tl, tr, bl, br, 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 )
show()
Boolean: Sets or returns the disabled state of the control.
Boolean: Returns whether the control is visible or not.
Boolean: 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.
Number: The initial value of the Slider. Value must be between 0-100,  the default min and max values.
Number: Fraction of the screen width. [0-1]
Number: Fraction of the screen height.
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: Top-Left border radius in pixels.
Number: Top-Right border radius in pixels.
Number: Bottom-Left border radius in pixels.
Number: Bottom-Right border radius in pixels.
Number: Fraction of the parent width.
Number: Fraction of the parent height.
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 screen 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.
Number: Fraction of the parent height. [0-1]
Number: Returns the absolute height of the control in pixels.
Number: Returns the absolute distance of the control from the left in pixels.
Number: Returns the absolute distance of the control from the top in pixels.
Number: Returns the absolute width of the control in pixels.
Number: Sets or returns the border thickness in pixels.
Number: Sets or returns the corner radius in pixels.
Number: Sets or returns the height of the control as a fraction of the parent control.
Number: Returns the distance of the control from the left.
Number: Sets or returns the maximum value.
Number: Sets or returns the minimum value.
Number: Sets or returns the opacity of the control.
Number: Sets or returns the angle of rotation in degrees.
Number: Sets or returns the Sider Component steps.
Number: Sets or returns the size of the text within the control.
Number: Returns the distance of the control from the top.
Number: Sets or returns the value of the Slider Component.
Number: Sets or returns the width of the control as a fraction of the parent control.
String: comma “,” separated: “Color: `Primary` `Secondary`
`Orienation`: `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 form `#rrggbb`”
String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”
String: “Unit. Values are `px` `rem` or `%`.”
String: “`px` or `%`”
String: “The size thickness mode. Can be `px`”
String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”
String: A hexadecimal color of the form #rrggbb
String: The path to your image file.
String: Sets or returns the border color. Color is in hexadecimal form #rrggbb
String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
String: Sets or returns the theme color of the Slider. Values can be Primary or Secondary
String: Sets or returns the relative path to the font-family use.
String: Sets or returns the options of the control.
String: Sets or returns the orientation of the Slider Component. Values can be Vertical or Horizontal
String: Sets or returns the color of the text.
String: Sets or returns the track properties of the Slider Component. Values can be Normal False or Inverted
String: Returns the type of the control.
String: 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.
String: Sets or returns the visibility of the control.
Object: The layout where to add the Slider Component.
Object: The marks on the Slider Component.
Object: The pointer event object.
Object: The click event object.
Object: Returns the parent layout control.
Object: Returns the position of the control. The returned object has left top right and bottom props.
List: 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.
List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
function( value )
function( event )
function( event )
sld.animate
Animate the component
sld.bringForward
Bring this component forward by a given z-index
sld.destroy
Destroy the component
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.hide
Hide the component
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 a callback handler when the component is touch
sld.setPadding
Sets the padding component 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
sld.setSize
Sets the size of the component
sld.show
Show the component