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.
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:
slideValue.style.left = (value/2) + "%";
porslideValue.style.left = ((value/1.42) +12 ) + "px";
solo empeorará el resultado ... mirar