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

HTML
TypeScript

<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
`valueChange`	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

NativeScript Angular

Slider

Usage

Styling

Properties

Events

API References

Native Component