Slider

API Reference: UI.Slider

Slider can be used to select a value from a range of values by moving the slider thumb along the track.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const Slider = require('sf-core/ui/slider');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var mySlider = new Slider({
width: 200,
maxValue: 100,
minValue: 0,
value: 40,
minTrackColor: Color.RED,
thumbColor: Color.BLUE,
onValueChange: function() {
console.log("Slider's value: " + mySlider.value);
}
});
this.layout.addChild(mySlider);
}
);
module.exports = Page1;