2 | Updating slider options
3 |
4 | {{ctrl.options.start}}
5 |
6 |
7 |
10 |
11 |
14 |
15 |
16 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/updating-slider-options/updating-slider-options.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | angular.module('exampleApp').controller('UpdatingSliderOptionsCtrl', function() {
4 | var that = this;
5 | that.options = {
6 | start: 30,
7 | range: {
8 | min: 0,
9 | max: 40
10 | },
11 | pips: { mode: 'steps', density: 2 }
12 | };
13 | that.setRange = function(min, max) {
14 | that.options.range = {
15 | min: min,
16 | max: max
17 | }
18 | }
19 | })
--------------------------------------------------------------------------------
/nouislider.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | angular.module('ya.nouislider', [])
4 | .value('yaNoUiSliderConfig', {})
5 | .directive('yaNoUiSlider', ['$timeout', '$log', 'yaNoUiSliderConfig', function($timeout, $log, yaNoUiSliderConfig) {
6 | function toArray(val) {
7 | return angular.isArray(val) ? val : [val];
8 | }
9 |
10 | function copy(val) {
11 | return toArray(val).slice();
12 | }
13 |
14 | function equals(a, b) {
15 | a = toArray(a);
16 | b = toArray(b);
17 |
18 | return a[0] === b[0] && a[1] === b[1];
19 | }
20 |
21 | function omit(object, property) {
22 | var keys = Object.keys(object),
23 | index = -1,
24 | length = keys.length,
25 | result = {};
26 |
27 | while (++index < length) {
28 | var key = keys[index];
29 | if (key !== property) {
30 | result[key] = object[key];
31 | }
32 | }
33 | return result;
34 | }
35 |
36 | return {
37 | restrict: 'A',
38 | require: 'yaNoUiSlider',
39 | scope: {
40 | yaNoUiSlider: '=',
41 | yaNoUiSliderDisabled: '=',
42 | yaNoUiSliderHandle1Disabled: '=',
43 | yaNoUiSliderHandle2Disabled: '=',
44 | yaNoUiSliderSlideDebounce: '@'
45 | },
46 | controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
47 | var that = this,
48 | noUiSliderElement = $element[0],
49 | noUiSliderEvents = $scope.$parent.$eval($attrs.yaNoUiSliderEvents),
50 | slideDebounceDelay = $scope.yaNoUiSliderSlideDebounce || 0,
51 | events = slideDebounceDelay && slideDebounceDelay === 'Infinity' ? ['change'] : ['change', 'slide'],
52 | noUiSliderInstance,
53 | origins,
54 | sliderScope,
55 | pendingSlideDebounce;
56 |
57 | // allow to get noUiSlider instance from outside of that directive
58 | that.getNoUiSlider = function() {
59 | return noUiSliderInstance;
60 | };
61 |
62 | function toggleDisabled(element, newValue, oldValue) {
63 | if (newValue) {
64 | element.setAttribute('disabled', true);
65 | } else {
66 | element.removeAttribute('disabled');
67 | }
68 | }
69 |
70 | function destroy() {
71 | sliderScope.$destroy();
72 | noUiSliderInstance.off('slide change update slide');
73 | noUiSliderInstance.destroy();
74 | $timeout.cancel(pendingSlideDebounce);
75 | }
76 |
77 | function createSlider() {
78 | function updateValue(newValue) {
79 | var newValueCopy = copy(newValue);
80 | if (!equals(newValueCopy, latestValue)) {
81 | latestValue = newValueCopy;
82 | $scope.$applyAsync(function() {
83 | if (angular.isArray(newValue)) {
84 | if (angular.isArray($scope.yaNoUiSlider.start)) {
85 | $scope.yaNoUiSlider.start[0] = newValue[0];
86 | $scope.yaNoUiSlider.start[1] = newValue[1];
87 | } else {
88 | $scope.yaNoUiSlider.start = newValue[0];
89 | }
90 | } else {
91 | $scope.yaNoUiSlider.start = newValue;
92 | }
93 | });
94 | }
95 | }
96 |
97 | sliderScope = $scope.$new();
98 | var options = angular.extend({}, yaNoUiSliderConfig, $scope.yaNoUiSlider);
99 | var latestValue = copy(options.start);
100 | options.start = copy(options.start);
101 | noUiSlider.create(noUiSliderElement, options);
102 | origins = noUiSliderElement.getElementsByClassName('noUi-origin');
103 | noUiSliderInstance = noUiSliderElement.noUiSlider;
104 |
105 | sliderScope.$watch(function() {
106 | var modelValue = $scope.yaNoUiSlider.start;
107 | if (!equals(modelValue, latestValue)) {
108 | latestValue = copy(modelValue);
109 | noUiSliderInstance.set(copy(modelValue));
110 | }
111 | return latestValue;
112 | });
113 |
114 | angular.forEach(events, function(eventName) {
115 | noUiSliderInstance.on(eventName + '.internal', function(values, handle, unencoded) {
116 | if (eventName === 'slide' && slideDebounceDelay) {
117 | $timeout.cancel(pendingSlideDebounce);
118 | pendingSlideDebounce = $timeout(function() {
119 | updateValue(unencoded);
120 | }, slideDebounceDelay);
121 | } else {
122 | updateValue(unencoded);
123 | }
124 | });
125 | });
126 |
127 | angular.forEach(noUiSliderEvents, function (handler, event) {
128 | noUiSliderInstance.on(event + '.noUiSlider', function () {
129 | var handlerArguments = Array.prototype.slice.call(arguments);
130 | var self = this;
131 | $scope.$applyAsync(function () {
132 | handler.apply(self, handlerArguments);
133 | });
134 | });
135 | });
136 |
137 | sliderScope.$watch('yaNoUiSliderDisabled', toggleDisabled.bind(undefined, noUiSliderElement));
138 | sliderScope.$watch('yaNoUiSliderHandle1Disabled', toggleDisabled.bind(undefined, origins[0]));
139 | sliderScope.$watch('yaNoUiSliderHandle2Disabled', function(newValue, oldValue) {
140 | if (newValue && !origins[1]) {
141 | return $log.warn('Warning: attempt to toggle disabled state of second handle using ya-no-ui-slider-handle2-disabled attribute in one-handle slider, nouislider-angular is ignoring such call.');
142 | }
143 | if (origins[1]) {
144 | toggleDisabled(origins[1], newValue, oldValue);
145 | }
146 | });
147 | }
148 |
149 | function initialize() {
150 | $scope.$watch(function() {
151 | return omit($scope.yaNoUiSlider, 'start');
152 | }, function() {
153 | if (noUiSliderInstance) {
154 | destroy();
155 | }
156 | createSlider();
157 | }, true);
158 |
159 | $scope.$on('$destroy', destroy);
160 | }
161 |
162 | var initializeWatcher = $scope.$watch('yaNoUiSlider', function(options) {
163 | if (options) {
164 | initializeWatcher();
165 | initialize();
166 | }
167 | });
168 | }]
169 | }
170 | }]);
171 |
--------------------------------------------------------------------------------
/nouislider.min.js:
--------------------------------------------------------------------------------
1 | "use strict";angular.module("ya.nouislider",[]).value("yaNoUiSliderConfig",{}).directive("yaNoUiSlider",["$timeout","$log","yaNoUiSliderConfig",function(i,e,n){function a(i){return angular.isArray(i)?i:[i]}function r(i){return a(i).slice()}function t(i,e){return i=a(i),e=a(e),i[0]===e[0]&&i[1]===e[1]}function o(i,e){for(var n=Object.keys(i),a=-1,r=n.length,t={};++a