@nativescript-community/ui-range-seek-bar
NativeScript Range Seek Bar widget
npm i --save @nativescript-community/ui-range-seek-bar

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

Downloads per month NPM Version

NativeScript Range Seek Bar widget


iOS Demo Android Demo

Table of Contents

Installation

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

API

Events

  • 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";
//......
@NgModule({
//......
imports: [
//......
NativeScriptUIRangeSeekBarModule,
//......
],
//......
})
<!-- app.component.html -->
<StackLayout>
<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>
</StackLayout>
/*app.css*/
.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";

@Component({
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);
}
}

Examples:

Demos and Development

Setup

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.

Build

npm run build

npm run build.angular # or for Angular

Demos

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

npm run demo.svelte.ios # Example

Questions

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