Base solution for your next web application
Open Closed

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

User avatar
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.

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
4 Answer(s)
  • User Avatar
    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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    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
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    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!

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet