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

NativeScript Range Seek Bar widget

iOS Demo	Android Demo

Table of Contents

• Installation
  • Based on
• API
  • Events
  • Instance Properties
• Usage in Angular
  • Examples:
• Demos and Development
  • Setup
  • Build
  • Demos
• Questions

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:

• Basic range-seek-bar
  • A basic sliding range-seek-bar.
• All Sides
  • An example of range-seek-bars on all sides: left, right, top, bottom.

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.