Merge pull request #77 from jbarrus/master

added option to set upper and lower bounds that are higher/lower than the min/max

Author: PowerKiKi

demo/css/slider.css

@@ -4,4 +4,14 @@
   width: 2px;
   height: 8px;
   top: 16px;
+}
+
+.ui-slider {
+  position: relative;
+}
+
+.ui-slider-out-of-bounds {
+  position: absolute;
+  background-color: #EEE;
+  height: 100%;
 }

demo/demo.html

@@ -195,6 +195,30 @@ <h1>AngularUI Slider demo</h1>
 				<div ui-slider data-min="0" data-max="20" data-step="5" data-tick ng-model="demoVals.sliderExample13"></div>
 			</div>
 		</li>
+		<li>
+			<div class="sliderExample"><a name="ex14"></a>
+				<strong>Slider with lower and upper bounds.</strong>
+				<div ui-slider min="0" max="100" step="10" upper-bound="90" ng-model="demoVals.sliderExample14a">
+					<div class="ui-slider-out-of-bounds" style="right:0; width: 10%"></div>
+				</div>
+				<input type="text" ng-model="demoVals.sliderExample14a" />
+				<div ui-slider min="0" max="100" step="10" lower-bound="30" upper-bound="60" ng-model="demoVals.sliderExample14b">
+					<div class="ui-slider-out-of-bounds" style="left:0; width: 30%"></div>
+					<div class="ui-slider-out-of-bounds" style="right:0; width: 40%"></div>
+				</div>
+				<input type="text" ng-model="demoVals.sliderExample14b" />
+			</div>
+		</li>
+		<li>
+			<div class="sliderExample"><a name="ex15"></a>
+				<strong>Slider - range values with lower and uppwer bounds</strong>
+				<div ui-slider="{range: true}" min="0" max="100" step="0.01" lower-bound="20" upper-bound="90" use-decimals ng-model="demoVals.sliderExample15">
+					<div class="ui-slider-out-of-bounds" style="left:0; width: 20%"></div>
+					<div class="ui-slider-out-of-bounds" style="right:0; width: 10%"></div>
+				</div>
+				<input type="text" ng-model="demoVals.sliderExample15" />
+			</div>
+		</li>
 	</ol>
 	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
@@ -243,15 +267,18 @@ <h1>AngularUI Slider demo</h1>
 					start: function (event, ui) { $log.info('Event: Slider start - set with slider options', event); },
     				stop: function (event, ui) { $log.info('Event: Slider stop - set with slider options', event); }
 				}
-			}
+			};
 
 			$scope.demoVals = {
 				sliderExample3:     14,
 				sliderExample4:     14,
 				sliderExample5:     50,
 				sliderExample8:     0.34,
 				sliderExample9:     [-0.52, 0.54],
-				sliderExample10:     -0.37
+				sliderExample10:     -0.37,
+				sliderExample14a:	50,
+				sliderExample14b:	50,
+				sliderExample15:	[30, 60]
 			};
 
 			$scope.colorpicker = {

src/slider.js

@@ -20,7 +20,7 @@ angular.module('ui.slider', []).value('uiSliderConfig',{}).directive('uiSlider',
                 };
 
                 // convenience properties
-                var properties = ['min', 'max', 'step'];
+                var properties = ['min', 'max', 'step', 'lowerBound', 'upperBound'];
                 var useDecimals = (!angular.isUndefined(attrs.useDecimals)) ? true : false;
 
                 var init = function() {
@@ -75,8 +75,49 @@ angular.module('ui.slider', []).value('uiSliderConfig',{}).directive('uiSlider',
 
                 // Update model value from slider
                 elm.bind('slide', function(event, ui) {
+                    var valuesChanged;
+
+                    if (ui.values) {
+                        var boundedValues = ui.values.slice();
+
+                        if (options.lowerBound && boundedValues[0] < options.lowerBound) {
+                            boundedValues[0] = Math.max(boundedValues[0], options.lowerBound);
+                        }
+                        if (options.upperBound && boundedValues[1] > options.upperBound) {
+                            boundedValues[1] = Math.min(boundedValues[1], options.upperBound);
+                        }
+
+                        if (boundedValues[0] !== ui.values[0] || boundedValues[1] !== ui.values[1]) {
+                            valuesChanged = true;
+                            ui.values = boundedValues;
+                        }
+                    } else {
+                        var boundedValue = ui.value;
+
+                        if (options.lowerBound && boundedValue < options.lowerBound) {
+                            boundedValue = Math.max(boundedValue, options.lowerBound);
+                        }
+                        if (options.upperBound && boundedValue > options.upperBound) {
+                            boundedValue = Math.min(boundedValue, options.upperBound);
+                        }
+
+                        if (boundedValue !== ui.value) {
+                            valuesChanged = true;
+                            ui.value = boundedValue;
+                        }
+                    }
+
+
                     ngModel.$setViewValue(ui.values || ui.value);
                     scope.$apply();
+
+                    if (valuesChanged) {
+                        setTimeout(function() {
+                            elm.slider('value', ui.values || ui.values);
+                        }, 0);
+
+                        return false;
+                    }
                 });
 
                 // Update slider from model value