JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<div id="slider-wrapper"><input type="range" min="1" max="12" value="6" id="slider" /></div>
<div id="debug"></div>

CSS

#debug { color: #FFF; }
body {
   background-color: #33455D;
}

#slider-wrapper {
    position: relative;
}
.slider-bar {
    background-color: lightblue;
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 2px 0 0 2px;
    top: 22px;
    left: 1px
}

/* reset */
    input[type="range"] {
      background-color: green; /*#33455D;*/
      width: 100%;
      -webkit-appearance: none;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    input[type="range"]:focus {
      outline: none;
    }
    input[type="range"]::-ms-track {
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }

    /* Track */
    input[type="range"]::-webkit-slider-runnable-track {
      background-color: red; /* #1C2632; */
      height: 10px;
      margin-top: 20px;
      margin-bottom: 15px;
      border-radius: 2px;
    }
    input[type="range"]::-moz-range-track {
      background-color: #1C2632;
      height: 10px;
      margin-top: 20px;
      margin-bottom: 15px;
      border-radius: 2px;
    }
    input[type="range"]::-ms-fill-upper,
    input[type="range"]::-ms-fill-lower {
      background-color: #1C2632;
    }
    input[type="range"]::-ms-fill-lower {
      background-color: lightblue;
    }
    input[type="range"]::-ms-track {
      background-color: #1C2632;
      height: 10px;
      margin-top: 20px;
      margin-bottom: 15px;
      border-radius: 2px;
    }

    /* thumb */
    input[type="range"]::-webkit-slider-thumb {
      background-color: #33455D;
      border: 4px solid #FFFFFF;
      height: 30px;
      width: 30px;
      border-radius: 30px;
      margin-top: -11px;
    }
    input[type="range"]::-moz-range-thumb {
      background-color: #33455D;
      border: 4px solid #FFFFFF;
      height: 20px;
      width: 20px;
      border-radius: 20px;
    }
    input[type="range"]::-ms-thumb {
      background-color: #33455D;
      border: 4px...

JavaScript

var s1, s2;
try {
    s2 = window.getComputedStyle(document.getElementById('slider')).backgroundColor;
    s1 = window.getComputedStyle(document.getElementById('slider'), '::-ms-fill-upper').backgroundColor;
} catch(e) {
    s1 = s2;
}
$('#debug').html($('#debug').html() + s1 + s2);
if (s1 === s2) {
    var $slider = $('#slider');
    var $leftBar = $('<div></div>', { class: 'slider-bar' }).insertBefore('#slider');
    $slider.on('change', function() {
    var value = $slider.val() - 1;
    var max = $slider.prop('max');
    var percent = ((value / max) * 100) + 1;
    $leftBar.css({ 'width': percent + '%' });
    }).change();
}