目次
数値の範囲を指定するレンジスライダーが簡単に実装できるプラグイン。
ドキュメント：https://refreshless.com/nouislider/
ダウンロード：https://github.com/tb/ng2-nouislider
$ npm i –save nouislider ng2-nouislider
import { NouisliderModule } from 'ng2-nouislider';
@import "~nouislider/distribute/nouislider.min.css";
<nouislider #slider [config]="leftVerticalSliderConfig" (change)="onChange($event)"></nouislider>
html側でidを指定
import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { NouisliderComponent } from 'ng2-nouislider';
@Component({
selector: 'app-chart-history',
templateUrl: './chart-history.component.html',
styleUrls: ['./chart-history.component.scss']
})
export class ChartHistoryComponent implements OnInit, AfterViewInit {
sliderConfig: any = {
start: [0, 100], // つまみの初期位置
orientation: 'vertical', // スライダーの向き(横向きの場合はhorizontal)
direction: 'rtl', // スライダーの増減方向(defaultはltr)
tooltips: true, // スライダーの値表示
margin: 0.1, // つまみが２つの場合の最小範囲
step: 0.1, // つまみを動かした時の移動値
range: { // 最大値最小値
'min': [0],
'max': 100
},
};
// スライダーコンポーネント
@ViewChild('slider') private slider: NouisliderComponent;
constructor() {
}
ngOnInit() {
}
// スライダーのオプションの更新
setSliderRange(min, max) {
// startとrangeを変更
this.slider.slider.updateOptions({
start: [max, max],
range: {
'min': min,
'max': max
}
});
}
}
ltrの場合
横向きスライダーなら左から右、縦向きスライダーなら上から下。
rtlの場合
横向きスライダーなら右から左、縦向きスライダーなら下から上。
viewChildを使ってインスタンスを取得します。
スライダーの更新はupdateOptions()を使って行います。
スライダーのつまみを動かす時だけtooltipを表示させるにはscssに以下のコードを追加します。
.noUi-tooltip {
display: none !important;
}
.noUi-active .noUi-tooltip {
display: block !important;
}
シンプルでとても使いやすかったです。
chart.jsと一緒に使うことで動きのあるグラフが作れます。
