Quiero agregar una burbuja de valor en mi control deslizante, pero ningún tutorial me ayudó a hacerlo yo mismo, ya que soy nuevo en HTML y CSS.
Prefiero que la posición del valor esté justo encima del pulgar invisible y lo muevo junto con el pulgar . Pero si esa burbuja en movimiento es demasiado trabajo, también puedo ajustar con una burbuja estática en el lado izquierdo del control deslizante.
También quiero poder controlar el color del texto de valor y la burbuja .
Lo siguiente es mi control deslizante;
<div class = "container"> <input type="range" min="0" max="25" step="any" value="%VOLM" id="volm"> </div> <style> .container{ display:flex; width:100%; padding-top:2; height: fit-content;} #volm{ position: relative; margin-top: 5px; width:153px; border-radius: 3px; height: 5px; -webkit-appearance: none;} input::-webkit-slider-runnable-track { -webkit-appearance: none; background: linear-gradient(to right,#D4C81C, #FF0000); position: relative; box-sizing: border-box; width: 100%; height: 5px; border-radius: 3px; overflow: hidden;} input::-webkit-slider-thumb { position: relative; left: initial; bottom: 10px; -webkit-appearance: none; width: 0px; height: 20px; box-shadow: 330px 0 0 330px #DEDEDE, inset 0 0 0 40px #DEDEDE; margin-top: 5px;} </style>Puedes lograr eso con algo de Javascript. Por ejemplo:
const range = document.getElementById('range'), rangeV = document.getElementById('rangeV'), setValue = () => { const newValue = Number((range.value - range.min) * 100 / (range.max - range.min)), newPosition = 10 - (newValue * 0.2); rangeV.innerHTML = `<span>${range.value}</span>`; rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`; }; document.addEventListener("DOMContentLoaded", setValue); range.addEventListener('input', setValue); rangeV.style.display = "none"; function mouseDown() { rangeV.style.display = "block"; } function mouseUp() { rangeV.style.display = "none"; } range.addEventListener('mousedown', mouseDown); range.addEventListener('mouseup', mouseUp); body { min-height: 100vh; padding: 0 10vh; margin: 0; position: relative; display: flex; align-items: center; justify-content: center; } input[type=range] { -webkit-appearance: none; margin: 20px 0; width: 100%; } input[type=range]:focus { outline: none; } .range-wrap { width: 500px; position: relative; } .range-value { position: absolute; top: -50%; } .range-value span { width: 30px; height: 24px; line-height: 24px; text-align: center; background: #000; color: #fff; font-size: 12px; display: block; position: absolute; left: 50%; transform: translate(-50%, 0); border-radius: 6px; } .container { display: flex; width: 100%; padding-top: 2; height: fit-content; } #volm { position: relative; margin-top: 5px; width: 153px; border-radius: 3px; height: 5px; -webkit-appearance: none; } input::-webkit-slider-runnable-track { -webkit-appearance: none; background: linear-gradient(to right, #D4C81C, #FF0000); position: relative; box-sizing: border-box; width: 100%; height: 5px; border-radius: 3px; overflow: hidden; } input::-webkit-slider-thumb { position: relative; left: initial; bottom: 10px; -webkit-appearance: none; width: 0px; height: 20px; box-shadow: 330px 0 0 330px #DEDEDE, inset 0 0 0 40px #DEDEDE; margin-top: 5px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Input Range with Dynamic Label</title> </head> <body> <div class="range-wrap"> <div class="container"> <div class="range-value" id="rangeV"></div> <input id="range" type="range" min="0" max="25" step="any" value="%VOLM" id="volm"> </div> </div> </body> </html>