text-diff

<!DOCTYPE html>
<meta charset="utf-8">

#width-calc{
  top: -10000000px !important;
  position: absolute;
}
#text-diff, #width-calc{
  font-size: 130%;
  max-width: 600px;
  padding-left: 100px;
  height: 300px;
}

.slider {
  position: relative;
  top: 40px;
  left: 40px;
  cursor: pointer;
}

.slider-tray {
  position: absolute;
  width: 100%;
  height: 6px;
  border: solid 1px #ccc;
  border-top-color: #aaa;
  border-radius: 4px;
  background-color: #f0f0f0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.slider-handle {
  position: absolute;
  top: 3px;
}

.slider-handle-icon {
  width: 14px;
  height: 14px;
  border: solid 1px #aaa;
  position: absolute;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  top: -7px;
  left: -7px;
}

#play-button{
  cursor: pointer;
}

</style>

-->
  
  <div id='text-diff'></div>

<div class='slider'></div>
  <div style='margin-bottom: 50px;'>Current index: <span id='curindex'></span></div>
  <div id='play-button'>►❙❙</div>
</body>