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.

Usage

<Slider value="10" minValue="0" maxValue="100" loaded="onSliderLoaded" />
function onSliderLoaded(argsloaded) {
    const sliderComponent = argsloaded.object;
    sliderComponent.on("valueChange", (args) => {
        const slider = args.object;
        console.log(`Slider new value ${slider.value}`);
    });
}

exports.onSliderLoaded = onSliderLoaded;
import { Slider } from "tns-core-modules/ui/slider";

export function onSliderLoaded(argsloaded) {
    let sliderComponent: Slider = <Slider> argsloaded.object;
    sliderComponent.on("valueChange", function(args) {
        let slider = <Slider>args.object;
        console.log(`Slider new value ${slider.value}`);
    });
}

Improve this document

Demo Source


Styling

<Slider value="10" minValue="0" maxValue="100"
        backgroundColor="green" color="red" />

Improve this document

Demo Source


Creating Slider component 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;
}

Properties

Name Type Description
selectedIndex number Gets or sets the selected index of the SegmentedBar component.
items Array<SegmentedBarItem> Gets or sets the items of the SegmentedBar.
selectedBackgroundColor Color Gets or sets the selected background color of the SegmentedBar component.

Events

Name Description
selectedIndexChanged Emitted when the selected index is changed (via interaction or programmatically).

API References

Name Type
tns-core-modules/ui/slider Module
Slider Class

Native Component

Android iOS
android.widget.SeekBar UISlider