JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preview-area">
    <div></div>
    <div></div>
</div>
<p>Input:
    <input type="text" id="hex-color-input" value="#398" placeholder="#000000" />
</p>
<div id="range-slider"></div>
<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a>
</div>

CSS

body {
    background-color:white;
    color:black;
    padding:30px;
}
#preview-area {
    height:100px;
    overflow:hidden;
}
#preview-area div {
    float:left;
    width:50%;
    height:inherit;
}
#preview-area div span {
    display:block;
    background-color:white;
}
p {
    display:block;
    margin:1em 0;
}
.range-slider {margin:0 auto 1em}
.range-slider-track {
  width:auto;
  height:20px;
  margin:0 auto;
  position:relative;
  cursor:e-resize;
}
.range-slider-track:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider-track .dragger {
  display:block;
  width:10px;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
  /* opacity:.6; */
}
.range-slider-vertical {
  display:inline-block;
  vertical-align:middle;
  margin:0 1em 1em 0;
}
.range-slider-vertical .range-slider-track {
  cursor:n-resize;
  width:20px;
  height:100px;
}
.range-slider-vertical .range-slider-track:before {
  top:0;
  right:auto;
  left:9px;
  width:2px;
  height:100%;
}
.range-slider-vertical .range-slider-track .dragger {
  width:inherit;
  height:10px;
}
.no-select {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

JavaScript

/**
 * http://www.sweup.com
 */
function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    var rgb = "#",
        c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}
function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var...