JSFiddle - React, Tailwind, and code Playground

HTML

<div class="range-container">
    <input type="range" class="custom" min="0" max="4" step="0.1">
    <div class="range-fill"></div>
  </div>
      <div class="debug"></div>

CSS

body {
  margin-left: 3%;
  font-family: Helvetica,sans-serif;
}

/* ONLY applicable if you want the bubble above the slider */

output { 
  width: 100px;
  height: 40px;
  font-size: 2em;
}

.range-container {
  position:relative;
  max-width:40rem;
  top:2rem;
}

.custom {
  width: 100%;
  -webkit-appearance: none !important;
  height:20px;
  border-radius: 10px;
  background:#fff;
  border:2px solid orange;
  outline:none;
  position:absolute;
  left:0;
}

/* Change the Slider Button Color Here */
.custom::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:orange;
    height:60px;
    width:60px;
    border-radius: 30px;
    border:2px solid white;
}
.range-fill {
  position:absolute;
  left:0;
  background-color: orange;
  border-radius:10px;
  pointer-events:none;
  height:25px;
}

/*this doesn't work anymore. :( */
/*.custom:-webkit-slider-thumb::before {
  background-color: green;
}*/

JavaScript

;(function($){
  var touch = {},
    touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
    longTapDelay = 750, gesture;

  function swipeDirection(x1, x2, y1, y2) {
    return Math.abs(x1 - x2) >=
      Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
  }

  function longTap() {
    longTapTimeout = null
    if (touch.last) {
      touch.el.trigger('longTap')
      touch = {}
    }
  }

  function cancelLongTap() {
    if (longTapTimeout) clearTimeout(longTapTimeout)
    longTapTimeout = null
  }

  function cancelAll() {
    if (touchTimeout) clearTimeout(touchTimeout)
    if (tapTimeout) clearTimeout(tapTimeout)
    if (swipeTimeout) clearTimeout(swipeTimeout)
    if (longTapTimeout) clearTimeout(longTapTimeout)
    touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
    touch = {}
  }

  function isPrimaryTouch(event){
      console.log(event);
    return (event.pointerType == 'touch' ||
      event.pointerType == event.MSPOINTER_TYPE_TOUCH)
      && event.isPrimary
  }

  function isPointerEventType(e, type){
    return (e.type == 'pointer'+type ||
      e.type.toLowerCase() == 'mspointer'+type)
  }

  $(document).ready(function(){
    //start of code I added!
    var $slider = $('input[type=range]');

    $slider.on("mousedown click", function() {

      if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
          //alert("mobile safari find integer");
      }
        var $this = $(this);
        $(this).val(parseInt(Math.round($this.val())));
    });

    $slider.on("touchmove mousemove click", function(event){

      if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
          //alert("mobile safari calculate width");
      }
      $slider.hide().show(0);
   
      if (event.which === 1 || event.which === 0){
        var maxValue = $slider.prop('max');
        var $this = $(this);
        var rangeWidth =...