JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;">
    <tr>
      <td name="btStart"><img src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>

CSS

.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;
  margin-left:10px;
  overflow:hidden;
  width: 1000px;
  margin-left:5px;
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 115px;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}

JavaScript

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 20px;">start</td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option...