🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

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