JSFiddle - React, Tailwind, and code Playground

by Daniel Latimer

HTML

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

CSS

body {
  background: #201f1f;
}

.noUi-target {
  margin: 100px auto;
  width: 40%;
  background: transparent;
  border: none;
  box-shadow: none;
  background: #3f3d38;
}

.noUi-horizontal .noUi-handle {
  width: 28px;
  height: 28px;
  background: #1fbcd2;
  border-radius: 28px;
  border: none;
  box-shadow: none;
  cursor: pointer;
  outline: none;
}

.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
  content: '';
  background: transparent;
}

.noUi-base {
  z-index: 1;
}

.fake-fill {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  background: black;
  z-index: 0;
}

JavaScript

let slider = document.getElementById('slider');
let node = document.createElement('div');
let sliderUI = noUiSlider.create(slider, {
  start: [0],
  connect: false,
  range: {
    'min': -10,
    'max': 10
  }
});

node.classList.add('fake-fill');
slider.appendChild(node);

let intervalTimeInMinutes = 45
let intervalDivs = [...Array(24 * 60 / intervalTimeInMinutes)]
  .map(() => document.createElement('div'))

intervalDivs.forEach((intervalDiv, index) => {
  slider.appendChild(intervalDiv)

  let intervalWidth = 100 / intervalDivs.length
  intervalDiv.classList.add('fake-fill');
  intervalDiv.style.left = index * intervalWidth + '%'
  intervalDiv.style.right = (index + 1) * intervalWidth + '%'
  intervalDiv.style.width = intervalWidth + '%'
  intervalDiv.style.background = (index % 2) === 0 ? 'red' : '#0000'
})

sliderUI.on('update', (values, handle, unencoded, tap, positions) => {

  var pos = positions[0];

  if (pos >= 50) {
    node.style.left = '50%';
    node.style.right = 'auto';
    node.style.width = (pos - 50) + '%';
  } else {
    node.style.left = 'auto';
    node.style.right = '50%';
    node.style.width = (50 - pos) + '%';
  }
});