ngx slider

ngx-slider

Ng5-Sliderに基づいて、Angular> = 9のカスタマイズ可能なスライダーコンポーネント。

バージョン<9で角度サポートを探している場合は、元のパッケージを使用してください：NG5-Slider

インストール

スライダーをAngularプロジェクトに追加するには：

 npm install --save @m0t0r/ngx-slider

インストールしたら、スライダーをapp.module.tsに追加します：

 import { NgxSliderModule } from '@m0t0r/ngx-slider' ;

...

@ NgModule ( {
   ...
   imports : [
     ...
     NgxSliderModule ,
    ...
   ] ,
   ...
} )
export class AppModule { } 

サンプルの使用

これで、 app.component.ts ：など、アプリコンポーネントのスライダーコンポーネントを使用できます。

 import { Options } from '@m0t0r/ngx-slider' ;
...

@ Component ( { ... } )
export class AppComponent {
  value : number = 100 ;
  options : Options = {
    floor : 0 ,
    ceil : 200
  } ;
}

テンプレートファイルapp.component.html ：

 < ngx-slider [(value)] =" value " [options] =" options " > </ ngx-slider > 

スタイリング

スライダーに独自のスタイルを適用する方法の概要は、Styling.mdで説明されています。

アニメーション

スライダーの現在のベリオンは、スライダー運動のCSSアニメーションを備えています。アニメーションなしで以前の動作を好む場合は、SliderオプションでFlag animate: falseを設定できます。

ツールチップ

スライダーを使用すると、ツールチップの実装方法をカスタマイズできます。詳細については、tooltips.mdを参照してください。

既知の問題

新しいバグを報告する前に、既知の問題とその回避策のリストについては、nown_issues.mdをご覧ください。これらの問題の新しいバグレポートは受け入れられません。

開発者情報

プロジェクトに貢献したい場合は、developers.mdを参照してください。

免責事項

元のパッケージ（NG5-SLIDER）のサポートが不足しているため、Angular 9+サポートが追加されています。このパッケージの目的は、Angularバージョン<9のサポートを探している場合は、NG5-Sliderを使用してください。

ライセンス

MITライセンス。