JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.0.2/wNumb.js"></script>
<div class="wrapper">
  <div id="nonlinear">
  </div>

CSS

.wrapper {
  margin-top: 40px;
}
.noUi-tooltip input {
  width: 60px;
}

JavaScript

var nonLinearSlider = document.getElementById('nonlinear');

noUiSlider.create(nonLinearSlider, {
  start: [500, 4000],
  range: {
    // Starting at 500, step the value by 500,
    // until 4000 is reached. From there, step by 1000.
    'min': [0],
    '10%': [500, 500],
    '50%': [4000, 1000],
    'max': [10000]
  }
});

function sp( event ){ event.stopPropagation(); }

function makeTT ( i, slider ) {
	var tooltip = document.createElement('div'),
  		input = document.createElement('input');
      
	// Add the input to the tooltip
  tooltip.className = 'noUi-tooltip';
  tooltip.appendChild(input);
  
  // On change, set the slider
  input.addEventListener('change', function(){
  	var values = [null, null];
    values[i] = this.value;
    slider.noUiSlider.set(values)
  });
  
  // Catch all selections and make sure they don't reach the handle
  input.addEventListener('mousedown', sp);
  input.addEventListener('touchstart', sp);
  input.addEventListener('pointerdown', sp);
  input.addEventListener('MSPointerDown', sp);
  
  // Find the lower/upper slider handle and insert the tooltip
  slider.querySelector(i ? '.noUi-handle-upper' : '.noUi-handle-lower').appendChild(tooltip);
  
  return input;
}

// An 0/1 indexed array of input elements
var tooltipInputs = [makeTT(0, nonLinearSlider), makeTT(1, nonLinearSlider)];

// When the slider changes, update the tooltip
nonLinearSlider.noUiSlider.on('update', function(values, handle) {
   tooltipInputs[handle].value = values[handle];
});