AngularJS - slider.noUiSlider is not a function

Question

Question Background:

I am attempting to implement this following Range Slider (NoUiSlider) in my Angular app:

http://vasyabigi.github.io/angular-nouislider/

The Issue:

I have implemented the code as required but have multiple errors in Chrome's console relating to this slider.

The console errors will be shown below the following source code

This is the code from the Angular app:

App.js showing the 'nouislider' dependancy:

  angular
  .module('app', [
    'ui.router',
    'ui.bootstrap',
    'ngResource',
    'nouislider'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {

      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .state('update', {
            url: '/update',
            templateUrl: 'Update.html',
            controller: 'UpdateController'
        })
      }]);

    var app = angular.module('app');

Update Controller which contains Scope properties relating to the slider:

    app.controller('UpdateController', function ($scope, searchService) {
    $scope.searchingService = searchService;

    $scope.test = { 'single': 0, 'to': 0, 'from': 0 };

    $scope.searchFormUpdate = {};

    $scope.hideSearch = true;

    $scope.search = function () {

        $scope.searchingService.updateSearchList(
          $scope.searchFormUpdate.item,
          $scope.searchFormUpdate.catagory,
          $scope.searchFormUpdate.country);

    }

    $scope.items = [];
    $scope.currentPage = 1,
      $scope.numPerPage = 10,
      $scope.maxSize = 5;

    $scope.$watchCollection('searchingService.searchList', function (newVal, oldVal) {
        $scope.searchingService.searchList = newVal;
        $scope.items = [];

        for (i = 1; i <= $scope.searchingService.searchList.length; i++) {
            $scope.items.push($scope.searchingService.searchList[i]);
        }

        $scope.filterItems();

    })

    $scope.$watch('currentPage + numPerPage', function () {
        $scope.filterItems();
    });

    $scope.filterItems = function () {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage),
          end = begin + $scope.numPerPage;

        $scope.searchingService.filteredItems = $scope.searchingService.searchList.slice(begin, end);
    }  
});

Update.html View:

<div ng-controller="UpdateController" ng-show="hideSearch">
    <div class="form-group">
        <div slider ng-model="test.single" start=1 end=10></div>
        <div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5></div>
    </div>
</div>

Chrome Errors from the Console:

angular.js:10147 TypeError: slider.noUiSlider is not a function
    at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:63:16)
    at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) <div slider="" ng-model="test.single" start="1" end="10" class="ng-isolate-scope ng-pristine ng-valid">(anonymous function) @ angular.js:10147

angular.js:10147 TypeError: slider.noUiSlider is not a function
    at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:22:16)
    at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
    at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
    at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) <div slider="" ng-from="test.from" ng-to="test.to" start="0" end="100" step="5" class="ng-isolate-scope">

Currently I'm not sure how to go about fixing the 'slider.noUiSlider is not a function' errors. I have angular included in my app and this NoUiSlider is the only part that is currently not working.

Any help working out from these errors why the slider wont work will be greatly appreciated.

Answer 1

You have to be sure that you add all the required dependencies to your project as stated in http://vasyabigi.github.io/angular-nouislider/:

<link rel="stylesheet" href="bower_components/nouislider/jquery.nouislider.css" />
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/nouislider/jquery.nouislider.js"></script>
<script src="bower_components/nouislider/Link.js"></script>
<script src="bower_components/angular-nouislider/src/nouislider.js"></script>

One my first attempt to replicate your problem in Plunker I came across the same error "f.noUiSlider is not a function", until I decided to do a bower install angular-nouislider and add all those dependencies one by one from the bower_components folder. For some of these required files, I created new .js Plunker files and copy/pasted their code directly there:

jqueryslider.js == bower_components/nouislider/jquery.nouislider.js

link.js == bower_components/nouislider/Link.js

nouislider.js == bower_components/angular-nouislider/src/nouislider.js

As you can see now on this Plunker test the slide bars appear and no error is thrown.