在拇指上方显示滑块范围值

Question

I have this range slider, based on the one provided by W3Schools . Everything works fine, except that I want the value of it to show above the thumb, so when you slide it, it slides with it. I have tried something on JS, but it doesn't work: Here's my code:

HTML

<div class="simulador">
    <div class="contenedor">
        <h1 class="simula">Simular</h1>
        <div class="slider-container">
            <div class="interno">
                <div class="slidecontainer">
                    <input type="range" min="5000" max="100000" value="50000" class="slider" id="rango" oninput="outputUpdate(val)">
                    <output for="rango" id="valor"></output>
                </div>
            </div>
        </div>
    </div>
</div>

CSS (I'm using Sass, but here's the render)

.simulador .contenedor {
  padding: 25px 22px;
}
.simulador .contenedor .slider-container {
  padding: 35px 0px;
}
.simulador .contenedor .slider-container .interno {
  padding: 20px 0px;
}
.simulador .contenedor .slider-container .interno .slidecontainer {
  width: 100%;
  padding-top: 18px;
}
.simulador .contenedor .slider-container .interno .slidecontainer output {
  font-family: 'museo700';
  margin-bottom: 0px;
  position: absolute;
  padding: .5em;
  background: transparent;
  color: yellow;
}
.simulador .contenedor .slider-container .interno .slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 2.5px;
  background: #003664;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border: 0;
}
.simulador .contenedor .slider-container .interno .slider:hover {
  opacity: 1;
}
.simulador .contenedor .slider-container .interno .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 3.5px solid yellow;
}
.simulador .contenedor .slider-container .interno .slider ::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 3.5px solid yellow;
}

JavaScript

var slider = document.getElementById("rango");
var output = document.getElementById("valor");
output.innerHTML = slider.value;

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

function outputUpdate(val) {
    var result = document.querySelector("#valor");
    result.value = val;
    result.style.left = val + 'px';
}

Answer 1

Here's an idea for you. Just setting the left style attribute of the output to roughly equal the position of the circle. This is done my multiplying the slider width by the ratio of the slider value to the slider range.

 var slider = document.getElementById('rango'); slider.oninput = function() { var output = document.getElementById('valor'); output.innerHTML = this.value; var sliderWidth = this.getBoundingClientRect().width; var outputWidth = output.getBoundingClientRect().width; var offset = this.value / (this.max - this.min) * sliderWidth - outputWidth / 2; output.setAttribute('style', 'left: ' + offset + 'px'); } slider.oninput(); 

 .simulador .contenedor { padding: 25px 22px; } .simulador .contenedor .slider-container { padding: 35px 0px; } .simulador .contenedor .slider-container .interno { padding: 20px 0px; } .simulador .contenedor .slider-container .interno .slidecontainer { width: 100%; padding-top: 18px; } .simulador .contenedor .slider-container .interno .slidecontainer output { font-family: 'museo700'; margin-bottom: 0px; position: absolute; padding: .5em; background: transparent; color: blue; } .simulador .contenedor .slider-container .interno .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 2.5px; background: #003664; outline: none; -webkit-transition: .2s; transition: opacity .2s; border: 0; } .simulador .contenedor .slider-container .interno .slider:hover { opacity: 1; } .simulador .contenedor .slider-container .interno .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; cursor: pointer; border: 3.5px solid blue; } .simulador .contenedor .slider-container .interno .slider ::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #fff; cursor: pointer; border: 3.5px solid blue; } 

 <div class="simulador"> <div class="contenedor"> <h1 class="simula">Simular</h1> <div class="slider-container"> <div class="interno"> <div class="slidecontainer"> <input type="range" min="5000" max="100000" value="50000" class="slider" id="rango" oninput="outputUpdate(val)"> <output for="rango" id="valor"></output> </div> </div> </div> </div> </div>