AngularJS slider (wrapped jquery-ui slider)
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div ng-app="myApp">
<div ng-controller="SomeController">
<div slider config="sliderConfig" model="values" class="cdbl-slider"></div>
<button ng-click="addRange()">Click</button>
</div>
</div>
CSS
.cdbl-slider {
width: 400px;
margin: 10px;
}
JavaScript
var myApp = angular.module("myApp", []);
myApp.controller("SomeController", function ($scope) {
$scope.sliderConfig = {
min: 0,
max: 100,
step: 1
}
$scope.addRange=function(){
$scope.values.push(50);
}
$scope.values=[];
});
myApp.directive("slider", function () {
return {
restrict: 'A',
scope: {
config: "=config",
values: "=model"
},
link: function (scope, elem, attrs) {
$(elem).slider({
min: scope.config.min,
max: scope.config.max,
step: scope.config.step,
values:scope.values,
slide: function (event, ui) {
scope.$apply(function () {
//scope.price = ui.value;
});
}
});
scope.$watch('values.length',function(){
$(elem).slider("destroy");
$(elem).slider({
min: scope.config.min,
max: scope.config.max,
step: scope.config.step,
values:scope.values,
slide: function (event, ui) {
scope.$apply(function () {
//scope.price = ui.value;
});
}
}).append('<button style="width: 100%;height:inherit;position:absolute"></button>');
})
}
}
});