3

Estoy trabajando en un Range Slider que muestre su valor arriba del thumb, y mientras se deslice a la izquierda o derecha, el globito que está arriba del thumb debe seguirlo.

El problema está en que el globito se pone atrás del cero, o sea se va más a la izquierda, y para la dirección contraria también.

He probado de todo y nada.

introducir la descripción de la imagen aquí

Ahí se ve más claro, el globo debería estar en el centro del thumb, o alineado verticalmente con el thumb, pero el globo se va más a la derecha.

const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
    let value = inputSlider.value;
  slideValue.textContent = value;
  slideValue.style.left = (value/2) + "%";
  slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
    slideValue.classList.remove("show");      
});
.range {
  height: 80px;
  width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 0 65px 0 45px;
}
.range .sliderValue {
  position: relative;
  width: 100%;
}
.range .sliderValue span {
  position: absolute;
  height: 45px;
  width: 45px;
  color: #fff;
  font-weight: 500;
  top: -40px;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
  line-height: 55px;
  z-index: 2;
}
.range .sliderValue span.show {
  transform: translateX(-50%) scale(1);
}
.range .sliderValue span:after {
  position: absolute;
  content: "";
  height: 45px;
  width: 45px;
  background: #664AFF;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border: 3px solid #fff ;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
  border-bottom-left-radius:50%;
  z-index: -1;
}
<div class="range">
  <div class="sliderValue">
    <span>""</span>
  </div>
  <div class="field">
    <div class="value left">0</div>
    <input type="range" min="0" max="200" value="0" steps="1">
    <div class="value right">200</div>
  </div>
</div>

Lo que busco es que el globito o redondo que está encima del thumb (circulo del Range Slider) también se deslice verticalmente a la par.

Dejo el código completo acá, me ayudarías bastante:

https://jsfiddle.net/Gabyy_Hshss/b6s450ey/140/

2
  • No es correcto ni comentario, reemplazar slideValue.style.left = (value/2) + "%"; por slideValue.style.left = ((value/1.42) +12 ) + "px"; solo empeorará el resultado ... mirar el 11 ago. a las 21:34
  • @Cris223511.dev empiezo a creer, que mi browser no está funcionando bien, el otro día, ya veía cosas diferentes que tu... me parece que amerita cambio. el 12 ago. a las 2:30

1 respuesta 1

3

Lo primero es que creo te falta algo como:

.range input[type=range]{
  width:100%;
}

Luego si a .sliderValue le damos una altura y colocamos un color de fondo, podemos ver que:

introducir la descripción de la imagen aquí

  • El input range tiene un margen
  • la barra por donde corre el globo tiene el mismo ancho que el input, cuando debería ser menor, porque hay que considerar el radio de la bola del input

Entonces, simplemente quitamos el margen al input y aplicamos un width menor

const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
    let value = inputSlider.value;
  slideValue.textContent = value;
  slideValue.style.left = (value/2) + "%";
  slideValue.classList.add("show");
});
.range {
  height: 80px;
  width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 0 65px 0 45px;
}
.range .sliderValue {
  position: relative;
  width: calc(100% - 16px); /* WIDTH menos el radio de la bola */
  margin: 0 auto; /* centramos */
}
.range .sliderValue span {
  position: absolute;
  height: 45px;
  width: 45px;
  color: #fff;
  font-weight: 500;
  top: -40px;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
  line-height: 55px;
  z-index: 2;
  text-align: center;
}
.range .sliderValue span.show {
  transform: translateX(-50%) scale(1);
}
.range .sliderValue span:after {
  position: absolute;
  content: "";
  height: 45px;
  width: 45px;
  background: #664AFF;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border: 3px solid #fff ;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
  border-bottom-left-radius:50%;
  z-index: -1;
}

.range input[type=range]{
  width:100%;
  margin:0; /* SACAMOS MARGEN */
}
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div><div>&nbsp;</div>

<div class="range">
  <div class="sliderValue">
    <span>""</span>
  </div>
  <div class="field">
    <div class="value left">0</div>
    <input type="range" min="0" max="200" value="0" steps="1">
    <div class="value right">200</div>
  </div>
</div>

2
  • MUCHÍSIMAS GRACIAS! Espero algún día ser tan bueno como tú! el 13 ago. a las 0:51
  • 1
    @GabrielPaniagua me alegro haber podido ayudarte. Recuerda marcar la respuesta como aceptada. Saludos!!
    – Yussef
    el 13 ago. a las 0:54

Tu Respuesta

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

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