AngularJS-Slider Issue Report
Fork this Fiddle to show an issue and report it here: https://github.com/rzajac/angularjs-slider/issues
by vishwackh89
HTML
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
<div ng-controller="TestController as vm">
<p>Price: {{vm.priceSlider.value}}</p>
<rzslider rz-slider-model="vm.priceSlider.minValue"
rz-slider-transale="vm.translate"
rz-slider-high="vm.priceSlider.maxValue" rz-slider-options="vm.priceSlider.options"></rzslider>
<button ng-click="vm.add()">cccc</button>
</div>
</div>
JavaScript
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
var vm = this;
vm.showDates = getAllDays();
vm.translate = function(value, sliderId, label) {
switch (label) {
case 'model':
return 'date'
case 'high':
return 'date'
default:
return '$' + value
}
},
vm.add=function(){
console.log("vvvv",vm.showDates)
}
vm.priceSlider = {
minValue: 0,
maxValue: 1,
options: {
id: 'slider-id',
stepsArray: vm.showDates,
//, showTicks: true
onStart: function(id) {
console.log('on start ' + id); // logs 'on start slider-id'
},
onChange: function(id) {
console.log('on change ' + id); // logs 'on change slider-id'
},
onEnd: function(id) {
console.log('on end ' + id); // logs 'on end slider-id'
}
}
}
function getAllDays() {
start = new Date("August 13,2011");
future = new Date("October 13, 2014");
range = []
mil = 86400000 * 7 //24h
for (var i = start.getTime(); i < future.getTime(); i = i + mil) {
range.push(new Date(i).toLocaleDateString())
}
return range;
};
}