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

Basic Slider

HTML

<GridLayout class="m-15" rows="auto auto" columns="50 * 50">
    <Label row="0" colSpan="3" class="h2 p-15" [text]="currentValue | number:'2.2'" textWrap="true"></Label>
    <Label row="1" col="0" text="&#xe90b;" textWrap="true" fontSize="15" class="icon"></Label>
    <Slider row="1" col="1" value="10" (valueChange)="onSliderValueChange($event)" minValue="0" maxValue="100"></Slider>
    <Label row="1" col="2" text="&#xe90b;" textWrap="true" fontSize="20" class="icon"></Label>
</GridLayout>

<GridLayout rows="auto auto" columns="50 * 50">
    <Label row="0" colSpan="3" text="&#xe901;" [fontSize]="fontSize || 5" textWrap="true" class="icon"></Label>
    <Label row="1" col="0" text="min" textWrap="true" fontSize="15"></Label>
    <Slider row="1" col="1" value="20" (valueChange)="onSecondSliderChange($event)" minValue="15" maxValue="100"></Slider>
    <Label row="1" col="2" text="max" textWrap="true" fontSize="20"></Label>
</GridLayout>

CSS

button, label, stack-layout {
    horizontal-align: center;    
}

.icon {
   font-family: 'icomoon';
}

Improve this document

Demo Source


Slider Access Value Code

HTML

<GridLayout class="m-15" rows="auto" columns="50 * 50">
    <Label class="h3" text="10" textWrap="true" row="10" col="0"></Label>
    <Slider minValue="10" maxValue="70" [(ngModel)]="sliderValue1" row="0"
     col="1"></Slider>
    <Label class="h3" text="70" textWrap="true" row="0" col="2"></Label>
</GridLayout>
<GridLayout class="m-15" rows="auto" columns="50 * 50">
    <Label class="h3" text="33" textWrap="true" row="0" col="0"></Label>
    <Slider minValue="33" maxValue="133" [(ngModel)]="sliderValue2" row="0"
     col="1"></Slider>
    <Label class="h3" text="133" textWrap="true" row="0" col="2"></Label>
</GridLayout>
<GridLayout class="m-15" rows="auto" columns="50 * 50">
    <Label class="h3" text="15" textWrap="true" row="0" col="0"></Label>
    <Slider minValue="15" maxValue="1000" [(ngModel)]="sliderValue3" row="0"
     col="1"></Slider>
    <Label class="h3" text="1000" textWrap="true" row="0" col="2"></Label>
</GridLayout>
<GridLayout class="m-15" rows="auto" columns="50 * 50">
    <Label class="h3" text="0" textWrap="true" row="0" col="0"></Label>
    <Slider minValue="0" maxValue="100" [(ngModel)]="sliderValue4" row="0"
     col="1"></Slider>
    <Label class="h3" text="100" textWrap="true" row="0" col="2"></Label>
</GridLayout>
<GridLayout class="m-15" rows="auto" columns="50 * 50">
    <Label class="h3" text="5" textWrap="true" row="0" col="0"></Label>
    <Slider minValue="5" maxValue="99" [(ngModel)]="sliderValue5" row="0"
     col="1"></Slider>
    <Label class="h3" text="99" textWrap="true" row="0" col="2"></Label>
</GridLayout>

<Button class="btn btn-primary btn-active" width="90%" text="Review results" (tap)="onTap()"></Button>

Set the default values of the Sliders and review result via Alert

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./slider-access-value.component.html",
})
export class SliderAccessValueComponent {
    public sliderValue1 = 15;
    public sliderValue2 = 40;
    public sliderValue3 = 800;
    public sliderValue4 = 80;
    public sliderValue5 = 100;

    public onTap() {
        let alertView = "First Slider: " + this.sliderValue1 + "\n" +
            "Second Slider: " + this.sliderValue2 + "\n" +
            "Third Slider: " + this.sliderValue3 + "\n" +
            "Fourth Slider: " + this.sliderValue4 + "\n" +
            "Fifth Slider: " + this.sliderValue5;
        alert(alertView);
    }
}

Improve this document

Demo Source


API Reference for the Slider Class

Native Component

Android iOS
android.widget.SeekBar UISlider
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

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