OyjqLq

index.html

<div id="range" class="ranger"></div>
<div id='console'></div>

OyjqLq.markdown

OyjqLq

A Pen by Lucas Dechow on CodePen.

License.

script.js

//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]);

scripts

<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>

style.css

/* 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;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css" rel="stylesheet" />