NativeScript Range Seek Bar

一个 NativeScript Range Seek Bar 小部件。

基于

TTRangeSlider (iOS)

Crystal Range Seekbar (Android)

安装

运行 tns plugin add nativescript-range-seek-bar

API

事件

• rangeSeekBarChanged
  当用户更改 Range Seek Bar 上的最小值或最大值时触发。
• rangeSeekBarFinalValue
  当用户完成对 Range Seek Bar 的触摸时触发。

实例属性

• minValue - Number
  获取或设置 Range Seek Bar 的最小值。
• maxValue - Number
  获取或设置 Range Seek Bar 的最大值。
• minStartValue - Number
  获取或设置 Range Seek Bar 的最小起始值。
• maxStartValue - Number
  获取或设置 Range Seek Bar 的最大起始值。
• minRange - Number
  获取或设置两个滑块的最小范围。
• step - Number
  获取或设置范围之间的最小步长，默认为 1。
• cornerRadius - Number
  获取或设置两个滑块的圆角半径。
• barHeight - Number
  获取或设置 Range Seek Bar 的条形高度。
• barColor - Color
  获取或设置 Range Seek Bar 的条形颜色。
• barHighlightColor - Color
  获取或设置 Range Seek Bar 的条形高亮颜色。
• thumbColor - Color
  获取或设置两个滑块的颜色。

在 Angular 中的使用

• 在 NgModule 中导入 NativeScriptUIRangeSeekBarModule

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);
    }
}

演示

此存储库包含 Angular 和纯 NativeScript 演示。为了运行这些演示，请在您的壳中执行以下操作

$ git clone https://github.com/HoangJK/nativescript-range-seek-bar.git
$ cd nativescript-range-seek-bar/src
$ npm install
$ npm run demo.ios

这将运行纯 NativeScript 演示项目在 iOS 上。如果您想运行 Android 版本，只需使用 .android 而不是 .ios 后缀。

如果您想运行 Angular 演示，只需使用 demo.ios.ng。