AngularJS-Slider Issue Report
Fork this Fiddle to show an issue and report it here: https://github.com/rzajac/angularjs-slider/issues
by YameenYasin
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">
<button ng-click="vm.getSliderData()">
Get New Data
</button>
<slider-component slider-data="vm.data"></slider-component>
</div>
</div>
JavaScript
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
myApp.directive('sliderComponent',function(){
return {
restrict: 'EA',
replace: true,
link: function(scope, element,attrs){
scope.data = {};
console.log(scope.sliderData);
scope.data.data1 = {
minValue: scope.sliderData.data1.minValue ,
maxValue: scope.sliderData.data1.maxValue,
options: {
ceil: scope.sliderData.data1.maxValue,
floor: scope.sliderData.data1.mixValue,
showTicksValues: false
}
};
scope.data.data2 = {
minValue: scope.sliderData.data2.minValue ,
maxValue: scope.sliderData.data2.maxValue,
options: {
ceil: scope.sliderData.data2.maxValue,
floor: scope.sliderData.data2.mixValue,
showTicksValues: true
}
};
},
template: '<div><p>This is a slider component</p><rzslider rz-slider-model="data.data1.minValue" rz-slider-high="data.data1.maxValue" rz-slider-options="data.data1.options"></rzslider><rzslider rz-slider-model="data.data2.minValue" rz-slider-high="data.data2.maxValue" rz-slider-options="data.data2.options"></rzslider></div>',
scope: {
sliderData:'=sliderData'
}
};
});
function TestController() {
var vm = this;
vm.data = {};
vm.data.data1 = {
minValue: 0,
maxValue: 100
};
vm.data.data2 = {
minValue: 0,
maxValue: 0
};
vm.getSliderData = function(){
vm.data.data1 = {
minValue: 0,
maxValue: 500000000
};
vm.data.data2 = {
minValue: 2,
maxValue: 4
};
}
}