dechowdev · October 14, 2015 11:32 · Oct 14, 2015
diff --git a/OyjqLq.markdown b/OyjqLq.markdown
@@ -0,0 +1,7 @@
+OyjqLq
+------
+
+
+A [Pen](http://codepen.io/Dechowmedia/pen/OyjqLq) by [Lucas Dechow](http://codepen.io/Dechowmedia) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/Dechowmedia/pen/OyjqLq/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,2 @@
+<div id="range" class="ranger"></div>
+<div id='console'></div>
diff --git a/script.js b/script.js
@@ -0,0 +1,57 @@
+//Here is the base implementation of the slider
+//We will now add "breaks" to the element such that something is blocked!
+
+var slider = document.getElementById('range');
+var debug = function(string){document.getElementById('testblock').textContent = string};
+
+noUiSlider.create(slider, {
+	start: 4
+	connect: true,
+  step: 1,
+	range: {
+		'min': 0,
+		'max': 20
+	}
+});
+
+var roundInput = function(element, curr_range, range, block_range = []){
+  var first_time = true;
+  var block_min = block_range[0];
+  var block_max = block_range[1];
+  element.noUiSlider.on('update', function( values, handle ){
+    if(block_max != range){
+      if(values[handle] <= block_max){
+        element.noUiSlider.set(curr_range);
+        return;
+      }
+      if(first_time){
+        var blockedwidth = (100-((range-(curr_range))/(range))*100)+"%";
+        var blockedblock = $('<div class="noUi-origin noUi-blocked blockedLayer"></div>').css('left',0).css('width',blockedwidth);
+        $(slider).find('.noUi-base').append(blockedblock);
+        first_time = false;
+      }
+    } else {
+      if(values[handle] >= block_min){
+        if(typeof element.noUiSlider.get()[1] == 'string'){
+          if(element.noUiSlider.get()[1] >= block_min){
+            element.noUiSlider.set( [null , block_min-2]);
+          }
+        } else {
+          element.noUiSlider.set(curr_range);
+        }
+        return;
+      }
+      if(first_time){
+        var blockedwidth = (((range-(curr_range))/(range))*100)+"%";
+        var blockedblock = $('<div class="noUi-origin noUi-blocked blockedLayer right"></div>').css('right',0).css('width',blockedwidth);
+       $(slider).find('.noUi-base').append(blockedblock);
+       first_time = false;
+      }
+    }
+  });
+} 
+
+roundInput(slider, 4, 20, [1, 2]);
+roundInput(slider, 16, 20, [19, 20]);
+
+
diff --git a/scripts b/scripts
@@ -0,0 +1,4 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css"></script>
+<script src="http://codepen.io/jamesbarnett/pen/fwLpc"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,16 @@
+/* Just a reduced test case */
+
+.blockedLayer{
+  background: red;
+}
+.blockedLayer.right{
+  left:inherit;
+}
+
+#console{
+  font-family:monospaced;
+  margin-top: 50px;
+  border:1px solid #333;
+  width:800px;
+  height: 250px;
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<div id="range" class="ranger"></div>
		<div id='console'></div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css" rel="stylesheet" />