Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>

<div class="slidecontainer">
Kívánt mennyiség <input type="range" min="1" max="500" value="100" class="slider" id="wantedQuantity">
<p><span id="wantedQuantity_feedback"></span></p>
Kívánt VG/PG arány <input type="range" min="1" max="100" value="70" class="slider" id="wantedpgvg">
<p><span id="wantedpgvg_feedback"></span></p>

  Alap VG/PG arány <input type="range" min="1" max="100" value="70" class="slider" id="basepgvg">
  <p><span id="basepgvg_feedback"></span></p>

  Eredmények:
  <p>PG mennyisége: <span id="pg"></span></p>
  <p>VG mennyisége: <span id="vg"></span></p>
  <p>Alap mennyisége: <span id="vg"></span></p>
  <p>Aroma mennyisége: <span id="vg"></span></p>
</div>

<script>
var slider_basepgvg = document.getElementById("basepgvg");
var output_basepgvg = document.getElementById("basepgvg_feedback");
output_basepgvg.innerHTML = slider_basepgvg.value.concat("VG/",100-slider_basepgvg.value,"PG");

slider_basepgvg.oninput = function() {
  output_basepgvg.innerHTML = this.value.concat("VG/",100-this.value,"PG");
}

var slider_wantedQuantity = document.getElementById("wantedQuantity");
var output_wantedQuantity = document.getElementById("wantedQuantity_feedback");
output_wantedQuantity.innerHTML = slider_wantedQuantity.value.concat("ml");

slider_wantedQuantity.oninput = function() {
  output_wantedQuantity.innerHTML = this.value.concat("ml");
}

var slider_wantedpgvg = document.getElementById("wantedpgvg");
var output_wantedpgvg = document.getElementById("wantedpgvg_feedback");
output_wantedpgvg.innerHTML = slider_wantedpgvg.value.concat("VG/",100-slider_wantedpgvg.value,"PG");

slider_wantedpgvg.oninput = function() {
  output_wantedpgvg.innerHTML = this.value.concat("VG/",100-this.value,"PG");
}

</script>

</body>
</html>