add draggableRangeOnly to demo

demo.js

@@ -67,7 +67,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       }
     }
   };
-  $scope.otherData = {start: 0, change: 0, end: 0};
+  $scope.otherData = {
+    start: 0,
+    change: 0,
+    end: 0
+  };
 
   //Slider config with custom display function
   $scope.slider_translate = {
@@ -86,7 +90,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   $scope.slider_alphabet = {
     value: 0,
     options: {
-      stepsArray:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+      stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
     }
   };
 
@@ -135,6 +139,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with draggable range only
+  $scope.slider_draggable_range_only = {
+    minValue: 4,
+    maxValue: 6,
+    options: {
+      ceil: 10,
+      floor: 0,
+      draggableRangeOnly: true
+    }
+  };
+
   //Vertical sliders
   $scope.verticalSlider1 = {
     value: 0,
@@ -280,7 +295,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       $scope.percentages = percentages;
     });
     modalInstance.rendered.then(function() {
-      $rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
+      $rootScope.$broadcast('rzSliderForceRender'); //Force refresh sliders on render. Otherwise bullets are aligned at left side.
     });
   };
 
@@ -319,10 +334,9 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
   $scope.toggleHighValue = function() {
-    if($scope.slider_all_options.maxValue != null) {
+    if ($scope.slider_all_options.maxValue != null) {
       $scope.slider_all_options.maxValue = undefined;
-    }
-    else {
+    } else {
       $scope.slider_all_options.maxValue = 8;
     }
   }

index.html

@@ -123,6 +123,15 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with draggable range only</h2>
+    <rzslider
+      rz-slider-model="slider_draggable_range_only.minValue"
+      rz-slider-high="slider_draggable_range_only.maxValue"
+      rz-slider-options="slider_draggable_range_only.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Vertical sliders</h2>
     <div class="row vertical-sliders" style="margin: 20px;">