JSFiddle - React, Tailwind, and code Playground

by firegroove

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

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: none !important;
  transition: none !important;
}

.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,
  animate: false,
  range: {
    'min': -10,
    'max': 10
  }
});

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

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) + '%';
  }
});