Metronic 8, noUiSlidere - how can I make use of it in Angular application? #11083

4 Answer(s)

• 

  0

  ismcagdas created 2 years ago

  Support Team

  Hi @alexanderpilhar

  nouislider is not included in AspNet Zero by default. You can install it as shown in https://refreshless.com/nouislider/download/ and then add it to angular.json file. After that, you need to add below line to typings.d.ts;

  declare let noUiSlider:any;
  

  After all, you can use nouislider in any page you want.

  Save Cancel
• 

  0

  alexanderpilhar created 2 years ago

  Hi @ismcagdas and thank you for your fast response!

  Could you please elaborate on what exactly I have to add to angular.json file!?

  So far, I tried the following (without success):

  • Adding nouislider to allowedCommonJsDependencies
  • Adding theme ressources src/assets/metronic/themes/default/plugins/global/plugins.bundle.css to styles and adding src/assets/metronic/themes/default/plugins/global/plugins.bundle.js to scripts

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  Support Team

  Hi,

  plugins.bundle.js doesn't contain nouislider. So, you need to add below lines to scripts and styles of angular.json;

  "node_modules/nouislider/nouislider.js",

  "node_modules/nouislider/nouislider.css",

  I assume you already runned yarn add nouislider or npm install nouislider in your angular project.

  Save Cancel
• 

  0

  alexanderpilhar created 2 years ago

  Alright, for whatever reason I thought I could use Metronic's ressources... My bad.

  Still, the result is not working very well:

  Anyway, I'm not going to try and get it right with noUiSlider. PrimeNG's Slider component works as expected and is all I need, so I switched to that one.

  Thank you for your help!

  Save Cancel