JSFiddle - React, Tailwind, and code Playground

by Kawaljit Singh

HTML

Right now I feel: Attentive
<div class="slidecontainer">
<span>Strongly agree</span><input type="range" min="0" max="100" value="50" step="0.01"         class="slider" id="myRange"><span>Strongly Disagre</span>
</div>
<font color="black">Value: <span id="demo"></span>

CSS

.slidecontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}
.slider {
  margin: 0 10px;
}

JavaScript

var slider1 = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider1.value;

slider1.oninput = function() {
output.innerHTML = this.value;
}