I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet:
var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
var alpha = [];
for(var i=65;i<=90;i++){
alpha.push(String.fromCharCode(i));
}
for(var i=65;i<=90;i++){
var first = 'A';
var next = String.fromCharCode(i);
alpha.push(first + next);
}
$scope.alphabet = 1;
$scope.alphabetMax = alpha.length - 1;
$scope.alphabetTranslate = function(value) {
return alpha[value].toUpperCase();
};
//Slider for class range
$scope.range_slider_ticks_values = {
startRange: 1,
endRange: 12,
options: {
stepsArray: 'LKG1,LKG2,class-1,class-2,class-3,class-4,class-5,class-6,class-7,class-8,class-9,class-10,class-11,class-12'.split(','),
showTicksValues: true
}
};
$scope.range_slider_batch_values = {
startRange: 1,
endRange: 12,
options: {
stepsArray: alpha.toString().split(','),
showTicksValues: true
}
};
$scope.$on('slideEnded', function() {
var startClass, endClass;
startClass = $scope.range_slider_ticks_values.startRange+1;
endClass = $scope.range_slider_ticks_values.endRange+1;
//alert("startClass: " + startClass + " endClass : " + endClass)
getBatchSliders(startClass, endClass)
});
$scope.getNumber = function(num,startClass,endClass) {
return new Array(num);
}
function getBatchSliders(startClass, endClass) {
endClass = parseInt(endClass);
//console.log("startClass: " + startClass + " endClass : " + endClass)
var totalSlider;
if (startClass === 1 || startClass === 2) {
//alert("pre class found")
startClass = startClass;
endClass = endClass;
totalSlider = endClass;
}
if (startClass >= 3) {
//alert("pre class not found")
startClass = startClass-2;
endClass = endClass-2;
totalSlider = endClass ;
}
$scope.$apply(function() {
$scope.startClass = startClass;
$scope.endClass = endClass;
$scope.totalSliders = totalSlider;
})
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="rzSliderDemo">
<div ng-controller="MainCtrl" class="wrapper">
{{range_slider_ticks_values.startRange+1}}
==
{{range_slider_ticks_values.endRange+1}}
<article>
<rzslider rz-slider-model="range_slider_ticks_values.startRange" rz-slider-high="range_slider_ticks_values.endRange" rz-slider-options="range_slider_ticks_values.options"></rzslider>
</article>
Total class {{totalSliders}}
<br>
<br> Class start from {{startClass}} to {{endClass}}
<div ng-if="totalSliders">
<div ng-repeat="i in getNumber(totalSliders,startClass,endClass) track by $index">
<span>
{{ alphabetTranslate($index) }}
</span>
<rzslider rz-slider-options="range_slider_batch_values.options" rz-slider-model="$index"></rzslider>
</div>
</div>
</div>
</div>Even though this code works in an online editor, the slider is not visible when I run the same code on my local system. Any suggestions?