0
277
ViewsLa barra deslizante "antes" se superpone en la parte superior del pulgar en HTML/CSS/JS
Estoy haciendo un reproductor de audio web con una barra de control deslizante. Utilicé la etiqueta <input type="slider"> para mostrar el control deslizante, y lo hice funcionar el 90% del camino. El único problema ahora es que la barra "antes", implementada con ".slider:before" en CSS, se superpone en la parte superior del botón del pulgar (especialmente cuando mueve el pulgar hacia el final). Esto es lo que parece:
Me gustaría ver cómo hacer que la barra "antes" más oscura se oculte debajo del pulgar.
Aquí está mi código
const seekSlider = document.getElementById('slider'); const showRangeProgress = (rangeInput) => { seekSlider.style.setProperty('--seek-before-width', `${rangeInput.value}%`); } seekSlider.addEventListener('input', (e) => { showRangeProgress(e.target); }) input[type="range"] { width: 185px; } .slider { position: relative; margin-left: 10px; cursor: pointer; -webkit-appearance: none; height: 10px; outline: none; margin-top: 7px; margin-bottom: -3px; opacity: 0.7; transition: 0.3s; } .slider::-webkit-slider-runnable-track { height: 3px; background: rgba(66, 64, 70, 0.15); } .slider::before { position: absolute; content: ""; width: var(--seek-before-width); height: 3px; margin-top: 4px; background-color: rgba(203, 195, 227, 0.8); } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; background: #a8a3b3; border-radius: 50%; margin-top: -2px; } <div id="controls" class="controls"> <input id="slider" type="range" value="0" max="100" class="slider"> <p id="time" class="time">0:00</p> <p class="endtime">3:25</p> </div>Esto es algo de lo que me gustaría lograr:
Cualquier ayuda sería muy apreciada :)
1 answers
Answer question0
Adición z-index:-1; propiedad a su .slider::before class hará el trabajo.
Prueba el siguiente fragmento
const seekSlider = document.getElementById('slider'); const showRangeProgress = (rangeInput) => { seekSlider.style.setProperty('--seek-before-width', `${rangeInput.value}%`); } seekSlider.addEventListener('input', (e) => { showRangeProgress(e.target); }) input[type="range"] { width: 185px; } .slider { position: relative; margin: 10px; cursor: pointer; height: 9px; outline: none; opacity: 0.7; transition: 0.3s; } .slider::-webkit-slider-runnable-track { height: 3px; background: rgba(66, 64, 70, 0.15); } .slider::before { position: absolute; content: ""; width: var(--seek-before-width); height: 3px; margin-top: 4px; z-index:-1; } .slider::-webkit-slider-thumb { width: 9px; height: 9px; margin-top:-6px; background: #a8a3b3; border-radius: 50%; background-color:grey; } <input id="slider" type="range" value="0" max="100" class="slider">Definición y uso : la propiedad
z-indexespecifica el orden de pila de un elemento. Un elemento con mayor orden de apilamiento siempre está delante de un elemento con menor orden de apilamiento.Nota:
z-indexsolo funciona en elementos posicionados (position: absolute,position: relative,position: fixedoposition: sticky) y elementos flexibles (elementos que son hijos directos de elementosdisplay:flex).