Open Closed

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


0
alexanderpilhar created

ASPNETZERO v11.1.0, Angular, .NET 6.0

I want to make use of Metronic's noUiSlider in my Angular application but I can't figure out how... Unfortunately, there is no information about how to make use of certain components in Angular in Metronic's documentation.

Please, give me some instructions on how to make use of it!

Maybe also add it to 'Demo-UI-Elements'-page in ASPNETZERO-demo-application.


4 Answer(s)
  • 0
    ismcagdas created
    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.

  • 0
    alexanderpilhar created

    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
  • 0
    ismcagdas created
    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.

  • 0
    alexanderpilhar created

    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!