Skip to main content
Version: 7.2.1


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.


The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
import PageSampleDesign from "generated/pages/pageSample";
import FlexLayout from "@smartface/native/ui/flexlayout";
import Application from "@smartface/native/application";
import Slider from "@smartface/native/ui/slider";
import { Route, Router } from "@smartface/router";

class StyleableSlider extends styleableComponentMixin(Slider) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
mySlider: StyleableSlider;
constructor(private router?: Router, private route?: Route) {

onShow() {
const { headerBar } = this;
Application.statusBar.visible = false;
headerBar.visible = false;

onLoad() {

this.mySlider = new StyleableSlider({
onValueChange: () => {
console.log("Slider's value: " + this.mySlider.value);

this.addChild(this.mySlider, "mySlider", ".sf-slider", {
width: 200,
maxValue: 100,
minValue: 0,
value: 40,
minTrackColor: "#FF0000",
thumbColor: "#338AFF",