No tengo ninguna experiencia en codificación o desarrollo web. Después de horas de investigación en Google, terminé escribiendo un conjunto de códigos (que funcionan perfectamente) para crear un control deslizante de rango con HTML, CSS y JS.
Estoy usando este control deslizante para cambiar el volumen de medios en mi teléfono inteligente, en este Panel de control de medios creado con una aplicación de Android llamada Tasker. Mi control deslizante es funcional, pero quiero realizar algunos cambios estéticos en mi control deslizante.
¿Podría alguien ayudarme a implementar lo siguiente en mi código?
Este es el código actual. Siéntete libre de editar esto.
<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:5 } #volm{ -webkit-appearance: none; background-color: magenta; border-radius: 2px; width:153px; height:5px; </style> <script> var slider = document.getElementById("volm"); slider.addEventListener("input",function() { performTask("WebView Slider - Media Volume",1,slider.value,)}, false); </script>La entrada de rango HTML tiene los siguientes dos pseudoelementos:
Puede diseñarlos usando los pseudo-selectores. Este CodePen tiene una solución inteligente para lograr lo que pretendes. Al usar sombras de cuadro en el pulgar, puede diseñar el área antes y después del pulgar. Use múltiples sombras de cuadro + desenfoque para lograr efectos de degradado.
Edité un poco tu código para mostrar cómo se puede lograr lo anterior. El descanso se trata solo de preferencias sobre cómo desea que se vea el control deslizante. También puede usar JavaScript para cambiar dinámicamente los valores de propiedad según la entrada.
.container{ display:flex; width:100%; padding-top:5; height: fit-content; } #volm{ position: relative; margin-top: 5px; border-radius: 2px; width:153px; height: 5px; -webkit-appearance: none; } input::-webkit-slider-runnable-track { -webkit-appearance: none; position: relative; box-sizing: border-box; background-color: hsl(0deg, 0%, 90%); width: 100%; height: 20px; border-radius: 5px; overflow: hidden; } input::-webkit-slider-thumb { position: relative; left: initial; bottom: 5px; -webkit-appearance: none; background-color: blue; width: 20px; height: 20px; border-radius: 20px; box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff; margin-top: 5px; } <div class = "container"> <input type="range" min="0" max="25" step="any" value="%VOLM" id="volm"> </div>