JSFiddle - React, Tailwind, and code Playground

by Eli Marudi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class = "container">


<canvas id="canvas">

</canvas>





<br>
<input id="my-input" type="range" min="1" max="72" value="1" />
</div>
<ul>
  <li class="tooltip swing" data-title="Choosing the perfect spot for your solar panels, wherever it will receive the most sun (preferably on the south, west, or east).">Location
  <li class="tooltip swing" data-title="Mounts are placed on top of your rafters. The distance varies based on the tilt and your city regulations.">Mounting</li>
 
 <li class="tooltip swing" data-title="The panels are placed and secured on the mount a few inches above the roof to allow air flow. In case of a central inverter installation, an inverter is installed near the main electrical panel.">Panels Placement</li>
  <li class="tooltip swing" data-title="The solar system is connected to the electric grid and waiting for the city inspector to approve it. Once approved and turned on, your meter will spin backwards and you will save money!">Done
</ul>

CSS

.container {
  width: 100%;
}

ul {
  width: 100%;
  height: 100px;
 position: absolute;
list-style-type: none;
 margin: 0;
  padding: 0;
 overflow: hidden;
  //background-color: #333333;
}

li {
  width: 25%;
  float: left;
  display: block;
  color: grey;
  text-align: center;
  padding-top: 10px;
  text-decoration: none;
}

canvas {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

//styling the range slider HTML5
body {
  padding: 30px;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border: 41px solid white;
  /*Width of slider*/
  width: 90%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 0px;
  // background: #ddd;
  border: none;
  border-radius: 3px;
  border-style: dotted;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: green;
  margin-top: -19px;
}

input[type=range]:focus {
  outline: none;
}

// background after first click (focus)
input[type=range]:focus::-webkit-slider-runnable-track {
  background: white;
}

input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 23px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}


/*hide the outline behind the border*/

input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background:...

JavaScript

var canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 900;

var totalImages = 139;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var videoFrame = new Image;
  var videoFrameUrl = 'http://greenpowersolarpanels.com/wp-content/video/greenNRG' + i + '.jpg';


  videoFrame.src = videoFrameUrl;
  videoFrames.push(videoFrame);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  var context = canvas.getContext("2d");
  context.drawImage(currentImage, 0, 0);

});