0

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';
}
1
  • Creo que mi problema es por el gran valor que tiene mi rango, pero no sé cómo solucionarlo. Commented el 15 oct. 2017 a las 21:07

1 respuesta 1

0

Aquí les comparto la respuesta que me han proporcionado en SO en inglés. https://stackoverflow.com/questions/46760239/show-slider-range-value-on-top-of-thumb

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.