CODEWITHSUNDEEP
angularjsionic-frameworknouislider
Duncan
Duncan

Reputation: 447

Angular JS Touch Slider displaying NaN error when used with Ionic Framework

I'm trying to use the Angular JS range slider with my ionic app but it displays as below:

range slider error

I've installed npm angularjs-slider but there is an error in the console - Uncaught ReferenceError: app is not defined. Can anyone help. app.js Code below followed by index.html code. Thanks

  angular.module('ionicApp', ['ionic', 'ngAutocomplete', 'rzModule', 'ui.bootstrap'])

  .controller("MainCtrl", function() {
    console.log("Main Controller says: Hello World");
  })

  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

      .state('main', {
      url: "/main",
      templateUrl: "templates/main.html",
      controller: 'MainCtrl'
    })

    .state('page', {
      url: "/page",
      templateUrl: "templates/page.html",
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/main');
  });

  app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
    //Range slider config
    $scope.minRangeSlider = {
      minValue: 10,
      maxValue: 90,
      options: {
        floor: 0,
        ceil: 100,
        step: 1
      }
    };
  });
<!DOCTYPE html>
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/rzslider.css">

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script -->
  <script src="cordova.js"></script>

  <script src="ngautocomplete.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  <script src="js/ui-bootstrap-tpls.js"></script>
  <script src="js/rzslider.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>

<body ng-app="ionicApp" ng-controller="MainCtrl" disable-tap>
  <ion-nav-view></ion-nav-view>
</body>

</html>

And I link it to my page template by:

<div class="wrapper">
  <article>
    <rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue" rz-slider-options="rangeSlider.options"></rzslider>
  </article>
</div>

Upvotes: 4

Views: 1898

Answers (2)

Oziris
Oziris

Reputation: 176

If you use jQuery 3.0.0, there is an incompatibility, try with jQuery 2.2.4

I open an issue on github : https://github.com/angular-slider/angularjs-slider/issues/365

Try the new version 5.1.1, it could fix your issue.

Upvotes: 4

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Because you had referenced wrong scope variable, it should be minRangeSlider instead of rangeSlider

Markup

<rzslider 
   rz-slider-model="minRangeSlider.minValue" 
   rz-slider-high="minRangeSlider.maxValue" 
   rz-slider-options="minRangeSlider.options">
</rzslider>

Edit

Remove angular.js cdn reference as you are already loading angular files from ionic-bundle.js

Upvotes: 0

Related Questions