QOXホームへ

Nouislider使ってみた

Akuto Urabe

Akuto Urabe

Nouisliderとは

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

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

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

 

インストール

Install

Import

Styles

 

使い方

 

HTML

html側でidを指定

 

TypeScript

 

sliderConfigのdirectionの補足

ltrの場合

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

rtlの場合

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

 

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

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

 

tips

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

 

 

使ってみた感想

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

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

Akuto Urabe

Akuto Urabe プログラマ

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

記事一覧
Go up