QOXホームへ

noUiSlider使ってみた

Akuto Urabe

Akuto Urabe

noUiSliderとは

数値の範囲を指定するレンジスライダーが簡単に実装できるプラグイン。

ドキュメント:https://refreshless.com/nouislider/

ダウンロード:https://github.com/tb/ng2-nouislider

 

インストール

Install

npm i --save nouislider ng2-nouislider

Import

import { NouisliderModule } from 'ng2-nouislider';

Styles

@import "~nouislider/distribute/nouislider.min.css";

 

使い方

 

HTML

 <nouislider #slider [config]="leftVerticalSliderConfig" (change)="onChange($event)"></nouislider>

html側でidを指定

 

TypeScript

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, // つまみが2つの場合の最小範囲
    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
      }
    });
  }

}

 

sliderConfigのdirectionの補足

ltrの場合

横向きスライダーなら左から右、縦向きスライダーなら上から下。

rtlの場合

横向きスライダーなら右から左、縦向きスライダーなら下から上。

 

viewChildを使ってインスタンスを取得します。

スライダーの更新はupdateOptions()を使って行います。

 

tips

スライダーのつまみを動かす時だけtooltipを表示させるにはscssに以下のコードを追加します。

.noUi-tooltip {
    display: none !important;
}
.noUi-active .noUi-tooltip {
    display: block !important;
}

 

 

使ってみた感想

シンプルでとても使いやすかったです。

chart.jsと一緒に使うことで動きのあるグラフが作れます。

Akuto Urabe

Akuto Urabe プログラマ

新しい知識をドンドン身につけていきたいです。

記事一覧
Go up