📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Slider

The NativeScript Slider component lets the user to drag a control to select a value. You can set the specific range to use by setting the component’s minValue and maxValue.

const sliderModule = require("tns-core-modules/ui/slider");
import {Slider} from "tns-core-modules/ui/slider";

Basics

The example shows how to create basic slider component as well as, how to change its properties values via code-behind.

<GridLayout class="m-15" rows="auto auto" columns="50 * 50">
    <Label row="0" colSpan="3" class="h2 p-15" text="{{ currentValue }}" textWrap="true"/>
    <Label row="1" col="0" text="&#xe90b;" textWrap="true" fontSize="15" class="icon"/>
    <Slider row="1" col="1" value="{{ sliderValue }}"  minValue="{{ firstMinValue }}" maxValue="{{ firstMaxValue }}"/>
    <Label row="1" col="2" text="&#xe90b;" textWrap="true" fontSize="20" class="icon"/>
</GridLayout>

<GridLayout rows="auto auto" columns="50 * 50">
    <Label row="0" colSpan="3" text="&#xe901;" fontSize="{{ fontSize }}" textWrap="true" class="icon"/>
    <Label row="1" col="0" text="min" textWrap="true" fontSize="15"/>
    <Slider loaded="onSliderLoaded" row="1" col="1" value="20"  minValue="15" maxValue="100"/>
    <Label row="1" col="2" text="max" textWrap="true" fontSize="20"/>
</GridLayout>
function onNavigatingTo(args) {
    const page = args.object;
    // set up the initial values for the slider components
    const vm = new observableModule.Observable();
    vm.set("currentValue", 10);
    vm.set("sliderValue", 10);
    vm.set("fontSize", 20);
    vm.set("firstMinValue", 0);
    vm.set("firstMaxValue", 100);
    // handle value change
    vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => {
        if (propertyChangeData.propertyName === "sliderValue") {
            vm.set("currentValue", propertyChangeData.value);
        }
    });
    page.bindingContext = vm;
}
// handle value change
function onSliderLoaded(args) {
    const sliderComponent = args.object;
    sliderComponent.on("valueChange", (sargs) => {
        const page = sargs.object.page;
        const vm = page.bindingContext;
        vm.set("fontSize", sargs.object.value);
    });
}

exports.onSliderLoaded = onSliderLoaded;
exports.onNavigatingTo = onNavigatingTo;
export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    // set up the initial values for the slider components
    const vm = new Observable();
    vm.set("currentValue", 10);
    vm.set("sliderValue", 10);
    vm.set("fontSize", 20);
    vm.set("firstMinValue", 0);
    vm.set("firstMaxValue", 100);
    // handle value change
    vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => {
        if (propertyChangeData.propertyName === "sliderValue") {
            vm.set("currentValue", propertyChangeData.value);
        }
    });
    page.bindingContext = vm;
}
// handle value change
export function onSliderLoaded(args) {
    const sliderComponent: Slider = <Slider>args.object;
    sliderComponent.on("valueChange", (sargs) => {
        const page = (<Slider>sargs.object).page;
        const vm = page.bindingContext;
        vm.set("fontSize", (<Slider>sargs.object).value);
    });
}

Improve this document

Demo Source


Code Behind

In the following example is shown, how to create Slider via Code-behind

<StackLayout id="stackLayoutId">
        <Label text="{{ 'Result: ' + slResult}}" textWrap="true" />

</StackLayout>
function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("slResult", 22);
    // creating new Switch and binding the value property
    const options = {
        sourceProperty: "age",
        targetProperty: "value"
    };
    const sliderComponent = new sliderModule.Slider();
    sliderComponent.bind(options, vm);
    // setting slider.value to 22
    vm.set("age", 22);

    sliderComponent.on("valueChange", (args) => {
        vm.set("slResult", args.object.value);
    });

    stackLayout.addChild(sliderComponent);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
    const page: Page = <Page> args.object;
    const vm = new Observable();
    const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");

    vm.set("slResult", 22);
    // creating new Switch and binding the value property
    const options = {
        sourceProperty: "age",
        targetProperty: "value"
    };
    const sliderComponent = new Slider();
    sliderComponent.bind(options, vm);
    // setting slider.value to 22
    vm.set("age", 22);

    sliderComponent.on("valueChange", (slargs) => {
        vm.set("slResult", (<Slider>slargs.object).value);
    });

    stackLayout.addChild(sliderComponent);

    page.bindingContext = vm;
}

Improve this document

Demo Source


API Reference for the Slider Class

Native Component

Android iOS
android.widget.SeekBar UISlider