9

Tengo el range pero sin color cuando el botón se mueve, quiero lograr que cuando se mueva el botón se vaya rellenando la barra de color. ¿alguna idea?

En esta imagen se ve lo que quiero hacer

introducir la descripción de la imagen aquí

.range{
height: 20px;
width: 100%;
background-color: #f1f1f1;
border-radius: 50px;
-webkit-appearance: none;
}
.range::-moz-range-thumb {
width: 25px;
height: 25px;
background-color: #ff0000;
border-radius: 50%;
border: 0;
}
<input id="range" class="range" type="range">

1
  • puedes ver muchos ejemplos en codepen input range
    – Bryro
    Commented el 26 jun. 2019 a las 4:06

2 respuestas 2

10

En los estilos de ejemplo se indica el color el cual toma cuando se va moviendo el rango del selector.

Importante, en el caso de -moz-range-progress no esta soportado para Chrome, por eso el ejemplo para distintos navegadores.

En el caso de Chrome

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
<input type="range" />

En el caso de Firefox

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}
<input type="range" />

Fuente: StackOverflow Ingles

4
+50

Para agregarle estilo a un <input type="range"> puedes hacerlo de la siguiente forma:

Si lo que buscas es solo dar color diferente a la barra de desplazamiento cuando se mueve el cursor puedes hacerlo obteniendo el valor del slider en una variable js (input) para luego pasarlo a una variable css (--value) y aplicarlo a la barra con un fondo de gradiente (anulando antes los estilos por defecto).

var input = document.querySelector("input[type=range]");
input.style.setProperty("--value", input.value);
input.addEventListener("input", function(evt) {
   input.style.setProperty("--value", input.value);
  },false);
input[type=range]{
    height: 20px;
width: 100%;
    height:.5em;
    display:block;
    margin:5em auto;
    -webkit-appearance: none; 
    background-image:linear-gradient(to right, #02C38A  calc(var(--value)*1%), black 0);
  }
<input type="range" min="0" max="100" value="50">

Si quieres una barra mas estilizada y con una etiqueta como la de la imagen, ademas de lo anterior deberás agregar un código para asignar el valor del rango a la etiqueta y estilos para dar forma circular al cursor:

//para el input
  var Input = document.querySelector('#input1');
  Input.style.setProperty("--value", Input.value);

  if (Input) {
    var w = parseInt(window.getComputedStyle(Input, null).getPropertyValue('width'));

  Input.addEventListener("input", function(evt) {
    Input.style.setProperty("--value", Input.value);
},false);

  //para la etiqueta
  var etq = document.querySelector('.etiqueta');
  if (etq) {
    
    etq.innerHTML = Input.value+"%";

    var pxls = w / 100;

    etq.style.left = ((Input.value * pxls) - 15) + 'px';

    Input.addEventListener('input', function() {
      
      etq.innerHTML = Input.value+"%";
      etq.style.left = ((Input.value * pxls) - 15) + 'px';

    }, false);
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.inputDiv {
  width: 90%;
  margin: 100px auto;
  position: relative;
}

input[type='range'] {
  display: block;
  width: 100%;
}

input[type='range']:focus {
  outline: none;
}

input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #02C38A;
  width: 21px;
  height: 21px;
  border: 3px solid #ddd;
  border-radius: 50%;
  margin-top: -9px;
}

input[type=range]::-moz-range-thumb {
  background-color: #02C38A;
  width: 16px;
  height: 16px;
  border: 3px solid #ddd;
  border-radius: 50%;
}

input[type=range]::-ms-thumb {
  background-color: #02C38A;
  width: 21px;
  height: 21px;
  border: 3px solid #ddd;
  border-radius: 50%;
}

input[type=range]::-webkit-slider-runnable-track {
  background-color: #333;
  height: 5px;
  -webkit-appearance: none;
  background-image:linear-gradient(to right, #02C38A calc(var(--value)*1%), black 0);
}

input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
}

input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  background-image:linear-gradient(to right, #02C38A calc(var(--value)*1%), black 0);
  height: 5px;
}

input[type=range]::-ms-track {
  background-color: #777;
  height: 3px;
}

.etiqueta {
  width: 30px;
  height: 26px;
  position: absolute;
  z-index: 9;
  background-color: #02C38A;
  color: white;
  font-size: 12px;
  text-align: center;
  padding-top: 7px;
  top: -45px;
}

.etiqueta:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 8;
  background-color: #02C38A;
  position: relative;
  left: 9px;
}
<div class="inputDiv">
  <div class="etiqueta"></div>
  <input type="range" value="50" min="0" max="100" autocomplete="off" id="input1">
</div>

y de esa forma te queda muy parecida a la de la imagen.

Ambas soluciones funcionan y se ven bien en Firefox, Chrome y otros navegadores.

Si deseas mas información sobre como dar estilos a estos elementos, puedes consultar los siguientes enlaces con los cuales aprendí y están 100% en español:

Dar estilo a los sliders, otro caso práctico

Dar estilo a los sliders, Input type range

Espero te sea de ayuda. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.