JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <div style="width: 500pt;">
      <canvas id="myChart" style="display: block;width: 1333px;height: 369px;"></canvas>
      <section class="range-slider">
        <span class="rangeValues"></span>
        <input value="1" min="1" max="" type="range" />
        <input value="10" min="1" max="" type="range" />
      </section>
    </div>
  </body>
  <style>
    section.range-slider {
      position: relative;
      width: 700px;
      height: 300px;
      float: left;
      text-align: center;
    }
    section.range-slider input[type="range"] {
      pointer-events: none;
      position: absolute;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      border: none;
      border-radius: 14px;
      background: #f1efef;
      box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
      -webkit-box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
      overflow: hidden;
      left: 0;
      top: 50px;
      width: 700px;
      outline: none;
      height: 20px;
      margin: 0;
      padding: 0;
    }
    section.range-slider input[type="range"]::-webkit-slider-thumb {
      pointer-events: all;
      position: relative;
      z-index: 1;
      outline: 0;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 14px;
      background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #dad8da),
        color-stop(100%, #413f41)
      );
      /* android <= 2.2 */
      background-image: -webkit-linear-gradient(top, #dad8da 0, #413f41 100%);
      /* older mobile safari and android > 2.2 */
      background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
      /* W3C */
    }
    section.range-slider input[type="range"]::-moz-range-thumb {
      pointer-events: all;
      position: relative;
      z-index: 10;
     ...