ngx slider

NGX-SLIDER

مكون منزلق قابل للتخصيص لـ Angular> = 9 استنادًا إلى NG5-Slider.

إذا كنت تبحث عن دعم Angular مع الإصدار <9 ، فيرجى استخدام الحزمة الأصلية: NG5-Slider

تثبيت

لإضافة شريط التمرير إلى مشروعك الزاوي:

 npm install --save @m0t0r/ngx-slider

بمجرد التثبيت ، أضف شريط التمرير إلى app.module.ts :

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

...

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

استخدام العينة

يمكنك الآن استخدام مكون Slider في مكونات التطبيق الخاصة بك ، على سبيل المثال في app.component.ts :

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

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

وفي ملف template app.component.html :

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

التصميم

تم وصف نظرة عامة على كيفية تطبيق أسلوبك الخاص على شريط التمرير في التصميم.

الرسوم المتحركة

يتميز الشرير الحالي من Slider بالرسوم المتحركة CSS لحركة التمرير. إذا كنت تفضل السلوك السابق ، بدون الرسوم المتحركة ، يمكنك ضبط Flag animate: false في خيارات التمرير الخاصة بك.

تلميحات الأدوات

يسمح شريط التمرير بتخصيص كيفية تطبيق تلميحات الأدوات. انظر Tooltips.md لمزيد من المعلومات.

القضايا المعروفة

قبل الإبلاغ عن خطأ جديد ، يرجى إلقاء نظرة على المعروفة _issues.md للحصول على قائمة بالمشاكل المعروفة والحلول. لن يتم قبول تقارير Bugs الجديدة عن هذه المشكلات.

معلومات المطور

إذا كنت ترغب في المساهمة في المشروع ، انظر المطورين.

تنصل

نظرًا لعدم وجود دعم للحزمة الأصلية (NG5-Slider) ، فقد تم تشويهه مع إضافة دعم Angular 9+. تتمثل القصد من هذه الحزمة في دعم إصدارات أحدث من Angular (9+) ، إذا كنت تبحث عن دعم الإصدار الزاوي <9 ، يرجى استخدام NG5-Slider.

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا.