One of my biggest problems with CSS has always been this INPUT [type = range], several browsers have their own styles for this tag, this becomes a bit tiresome to do with having to make adjustments to each browser, not to mention increases your style code so much, so I thought, why not use a DIV, a SPAN, and a little JavaScript to try to reduce that style? So my friend, this is where I'm going to help you, follow the resolution of this problem below
<input value="68" type="range"/>First we create our tags and give some id's, then our theme and then our little javascript
//Agora vem nosso enooorme java script, vamos apenas iniciar com a janela, o input vai enviar seu valor para "x", basta apenas pegar "x" e apontar para o width mais o sinbolo de porcentagem do span
window.CSSFacil = function(x) {
document.getElementById("slide").style.width = x + "%";
}
//esse mesmo valor pode ser usado para varias coisas, depende da sua imaginacao na hora de criar alguma funcao, por exemplo definir o volume de um audio ou video, definir a altura de algum objeto, alterar a cor de alguma coisa/*Em seguida, criaremos nosso "tema fácil"*/
#box{
position: relative; /*Devera ficar assim para os elementos nao sairem*/
height: 30px;
width: 200px;
/*so pra deixar mais bonitinho*/
background: rgba(255, 255, 255, 0.50);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.45);
border-radius: 3px;
}
/*como o span e o input teram css quase iguais, vamos simplificar e colocar juntos*/
#slide, #controle{
position: absolute; /*para que eles tomem todo espaco*/
height: 100%;
border-radius: 3px;
}
/*agora teremos uma pequena diferenca, o slide daremos uma cor, e o controle deixaremos invisivel, sacou a jogada*/
#slide{
background: #1E90FF;
transition: linear .1s all; /*para suavizar*/
left: 0; /*para que o slide comece do lado esquerdo, caso queira para o outro lado tera de rotacionar o input tambem*/
width: 68%;
}
#controle{
opacity: 0;
width: 100%;
/*note, o input deve ter 100%, mas o slide devera ter de acordo com o valor predefinido que voce colocara no input, exemplo: value="68", no css do silide devera ter o width de 68%. Da ate vontade de chorar de alegria vendo so isso de css pra ele, ne*/
}<div id="box">
<span id="slide"></span>
<!-- use o onchange e o oniput para enviar os valores para a funcao no mesmo tempo em que voce mexe no input -->
<input id="controle" type="range" max="100" min="0" value="68" onchange="CSSFacil(this.value)" oninput="CSSFacil(this.value)" />
</div>If you want to add that type to the ball at the end, just use the :: after in #slide and create it, much easier and simpler, no? If you liked it or not, or have ideas that could make it better, comment below!