A NativeScript Range Seek Bar widget.
TTRangeSlider for iOS
Crystal Range Seekbar for Android
Run tns plugin add nativescript-range-seek-bar
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" [minStartValue]="rangeSeekBarProp.minStartValue"
[maxStartValue]="rangeSeekBarProp.maxStartValue" [minRange]="rangeSeekBarProp.minRange" [step]="rangeSeekBarProp.step"
(rangeSeekBarChanged)="rangeSeekBarChanged($event)" (rangeSeekBarFinalValue)="rangeSeekBarFinalValue($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,
minStartValue: 0,
maxStartValue: 100,
minRange: 0,
step: 1
};
constructor() { }
rangeSeekBarChanged(event: RangeSeekBarEventData) {
console.log("rangeSeekBarChanged: ", event.value);
}
rangeSeekBarFinalValue(event: RangeSeekBarEventData) {
console.log("rangeSeekBarFinalValue: ", event.value);
}
}
## Demos
This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:
```shell
$ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
$ cd nativescript-range-seek-bar/src
$ npm install
$ npm run demo.ios
This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the .android instead of the .ios sufix.
If you want to run the Angular demo simply use the demo.ios.ng.