NativeScript Angular

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.

Image

Usage

<Slider value="10" minValue="0" maxValue="100"
        (valueChange)="onSliderValueChange($event)">
</Slider>
import { Component } from "@angular/core";
import { Slider } from "tns-core-modules/ui/slider";

@Component({
    moduleId: module.id,
    templateUrl: "./usage.component.html"
})
export class UsageComponent {
    onSliderValueChange(args) {
        let slider = <Slider>args.object;
        console.log(`Slider new value ${args.value}`);
    }
}

Improve this document

Demo Source


Styling

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

Improve this document

Demo Source


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