Slider

Using a slider requires the Slider module.

import { Slider } from "tns-core-modules/ui/slider";

Binding the Progress and Slider value properties to a observable view-model property.

<Page loaded="pageLoaded">
 <StackLayout orientation="vertical">
   <Progress value="{{ someProperty }}" />
   <Slider value="{{ someProperty }}" />
 </StackLayout>
</Page>
// function pageLoaded(args) {
//   var page = args.object;
//   var obj = new Observable();
//   obj.set("someProperty", 42);
//   page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;

Creating a slider

const slider = new Slider();

Setting the slider value and bounds

slider.maxValue = 120;
slider.value = 80;
slider.minValue = 50;

Binding value property to a model

const model = new Observable();
model.set("age", 21);
const options: BindingOptions = {
    sourceProperty: "age",
    targetProperty: "value"
};
slider.bind(options, model);
// slider.value is now 21
model.set("age", 22);
// slider.value is now 22

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.