JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.js"></script>
<div id="test">
</div>

CSS

#test {
  margin: 40px;
}

.noUi-tooltip {
  display: none;
}

.noUi-handle:focus .noUi-tooltip,
.noUi-active .noUi-tooltip {
  display: block;
}

.noUi-value {
  font-size: small;
  cursor: pointer;
}

.noUi-value[data-in-range="1"] {
  color: red;
}

JavaScript

var slider = document.getElementById("test");
       var from = 480;
       var to = 960;

       var numberToTime = function(n) {
         return `0${n / 60 ^ 0}`.slice(-2) + ':' + ('0' + n % 60).slice(-2);
       }



       noUiSlider.create(slider, {
         start: [from, to],
         step: 1,
         connect: true,
         tooltips: [true, true],
         format: {
           to: numberToTime,
           from: Number
         },
         range: {
           'min': 480,
           'max': 960
         },
         pips: {
           mode: 'count',
           values: 5,
           format: {
             to: numberToTime,
             from: Number
           },
         }
       });

       var pips = slider.querySelectorAll('.noUi-value');
       var pipsByValue = [];

       function clickOnPip() {
         var newValue = Number(this.getAttribute('data-value'));

         // Get "nearest" handle
         var currentValues = slider.noUiSlider.get();
         var handleStart = Number(currentValues[0].slice(0, 2)) * 60 + Number(currentValues[0].slice(3, 5));
         var handleEnd = Number(currentValues[1].slice(0, 2)) * 60 + Number(currentValues[1].slice(3, 5));

         var diffStart = Math.abs(handleStart - newValue);
         var diffEnd = Math.abs(handleEnd - newValue);

         if (diffStart >= diffEnd) {
           slider.noUiSlider.set([null, newValue]);

         } else {
           slider.noUiSlider.set([newValue, null]);
         }

       }

       for (var i = 0; i < pips.length; i++) {
         pips[i].addEventListener('click', clickOnPip);
       }

slider.noUiSlider.on('update', function(values, handle, unEncodedValues) {
       for (var i = 0; i < pips.length; i++) {
         var value = Number(pips[i].getAttribute('data-value'));
         pips[i].setAttribute('data-in-range', (value > unEncodedValues[0] && value < unEncodedValues[1]) ? '1' : '0');
       }
});