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.

API Reference for the Slider Class

Native Component

Android iOS
android.widget.SeekBar UISlider

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


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.