jQuery Range Slider in Angular Project

2 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Oct 2017

    Posted 29 Nov 2017 Link to this post

    I'm using the jQuery implementation of the range slider in an angular project (because I don't see a range slider component for angular yet, only a single value slider).  I have this working by including the scripts locally, however, I'd like to pull them in via npm upon the bundling of the app via webpack.

    Here are the entries from my angular-cli.json.  Webpack compiles successfully, however, scripts.bundle.js complains that the module related to kendo.all.js is not defined.

    "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",       
            "../node_modules/@progress/kendo-theme-default/dist/all.css",       
            "styles.css"
          ],
          "scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js",       
            "../node_modules/sortablejs/Sortable.min.js",
            "../node_modules/@progress/kendo-ui/js/kendo.all.js"
          ],

    The result is that kendo.all.js looks the same as its entry in scripts.bundle.js.

    I'm aware that I can include less than ALL to use the range slider, but I'm just trying to get this working first.

  2. Missing user
    Missing user avatar

    Posted 01 Dec 2017 Link to this post

    Hi Richard,

    I am not sure that I understand the issue completely. 

    However, in order to Install Kendo UI for jQuery and use it in an Angular project we just need the following command:

    npm install --save @progress/kendo-ui

    This is point 3. of the following article that demonstrates how to integrate Kendo UI for jQuery in an Angular application:

    https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

    I hope this helps. Please let me know in case you need further assistance for this case.

    Regards,
    Svetlin
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top