Cómo están todos. Tengo un slider para seleccionar un rango de valores, pero no logro que estos valores se muestren por encima del elemento que se mueve. Es decir, necesito que los números queden fijos sobre el círculo mientras este es desplazado. Para hacer el slider usé este tutorial de W3Schools.
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 (en realidad estoy usando Sass, pero aquí el render de la sección necesaria)
.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';
}