JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div>
    <p>Guests: <span id="guests"></span></p>
</div>

<div class="slidecontainer">
  <input type="range" min="0" max="250" value="0" step="10" class="slider1" id="myRange1">
</div>

<br>

<div>
    <p>Hours: <span id="hours"></span></p>
</div>

<div class="slidecontainer">
  <p><input type="range" min="0" max="12" value="0" step="1" class="slider2" id="myRange2"></p>

<br>

<p>Cost: <span id="cost"></span></p>
</div>

CSS

.slidecontainer {
  width: 100%;
}

.slider1, .slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  border-radius: 50px;
  background: #8300e9;
  outline: none;
}

.slider1::-webkit-slider-thumb, .slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.slider1::-moz-range-thumb, .slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

JavaScript

var slider1 = document.getElementById("myRange1");
var slider2 = document.getElementById("myRange2");
var output1 = document.getElementById("guests");
var output2 = document.getElementById("hours");
var price = document.getElementById("cost");

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

slider2.oninput = function() {
  output2.innerHTML = this.value;
}
debugger;
price.innerHTML = output1.value + output2.value;