TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published


Downloads per month NPM Version

NativeScript Range Seek Bar widget

iOS Demo Android Demo

Table of Contents


Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-range-seek-bar

Based on

TTRangeSlider for iOS

Crystal Range Seekbar for Android



  • valueChanged
    Triggered when user has changed minimum value or maximum value on the Range Seek Bar.
  • finaValueChanged
    Triggered when user has finished touch on the Range Seek Bar.

Instance Properties

  • minValue - Number
    Gets or sets minimum value of the Range Seek Bar.
  • maxValue - Number
    Gets or sets maximum value of the Range Seek Bar.
  • valueMin - Number
    Gets or sets minimum start value of the Range Seek Bar.
  • valueMax - Number
    Gets or sets maximum start value of the Range Seek Bar.
  • minRange - Number
    Gets or sets minimum range of two thumb.
  • step - Number
    Gets or sets minimum steps between range, default is 1.
  • cornerRadius - Number
    Gets or sets corner radius of two thumb.
  • barHeight - Number
    Gets or sets bar height of the Range Seek Bar.
  • barColor - Color
    Gets or sets bar color of the Range Seek Bar.
  • barHighlightColor - Color
    Gets or sets bar highlight color of the Range Seek Bar.
  • thumbColor - Color
    Gets or sets color of two thumb.

Usage in Angular

  • Import NativeScriptUIRangeSeekBarModule in NgModule:
import { NativeScriptUIRangeSeekBarModule } from "nativescript-range-seek-bar/angular";
	imports: [
<!-- app.component.html -->
    <RangeSeekBar [minValue]="rangeSeekBarProp.minValue" [maxValue]="rangeSeekBarProp.maxValue" [valueMin]="rangeSeekBarProp.valueMin"
        [valueMax]="rangeSeekBarProp.valueMax" [minRange]="rangeSeekBarProp.minRange" [step]="rangeSeekBarProp.step"
        (valueChanged)="valueChanged($event)" (finaValueChanged)="finaValueChanged($event)" class="range-seek-bar"></RangeSeekBar>
.range-seek-bar {
    bar-color: #8990C4;
    bar-highlight-color: #2434AD;
    thumb-color: #1A246D;
    bar-height: 10;
    corner-radius: 30;
// app.component.ts
import { Component } from "@angular/core";
import { RangeSeekBarEventData } from "nativescript-range-seek-bar";

    selector: "ns-app",
    templateUrl: "app.component.html",

export class AppComponent {

    public rangeSeekBarProp = {
        minValue: 0,
        maxValue: 100,
        valueMin: 0,
        valueMax: 100,
        minRange: 0,
        step: 1

    constructor() { }

    valueChanged(event: RangeSeekBarEventData) {
        console.log("valueChanged: ", event.value);

    finaValueChanged(event: RangeSeekBarEventData) {
        console.log("finaValueChanged: ", event.value);


Demos and Development


To run the demos, you must clone this repo recursively.

git clone https://github.com/@nativescript-community/ui-range-seek-bar.git --recursive

Install Dependencies:

npm i # or 'yarn install' or 'pnpm install'

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.


npm run build

npm run build.angular # or for Angular


npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example


If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.


npm i @nativescript-community/ui-range-seek-bar

DownloadsWeekly Downloads






Unpacked Size

159 kB

Total Files


Last publish


  • dgmachado
  • classicoldsong
  • mayerlench
  • jcassidyav
  • sebjean
  • cjohn001
  • edusperoni
  • asharghi
  • farfromrefuge
  • triniwiz
  • eddyverbruggen
  • rigor789
  • walkerrunpdx
  • dnr
  • keerl
  • cvietor
  • bradmartin
  • rdlabo
  • tralves