Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » llenar barra de input range

CSS - llenar barra de input range

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

llenar barra de input range

Publicado por fernando (1 intervención) el 07/07/2019 13:20:27
Buenas tengo varios inputs type range que van de 0 a 100.
Me gustaría que por ejemplo si el range esta a la mitad al 50, la barra del comienzo hasta el thumb del range sea de otro color.

Cuala es la clase para poder hacer lo que describo?

tipo esto:

https://clientes.kutxabank.es/es/simuladores/prestamos/simulador-cuota-mensual-prestamos-personales.html


gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de José Manuel
Val: 33
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

llenar barra de input range

Publicado por José Manuel (8 intervenciones) el 08/07/2019 08:17:19
Hola:

Como suele ocurrir, depende del navegador. Tienes varias opciones:

- Chrome: debes ocultar la propiedad overflow y rellenar la barra a la izquierda del marcador con sombra.
- En Firefox e IE (sic), lo tienes más fácil:
- Firefox: ::-moz-range-progress
- IE: ::-ms-fill-lower

Un ejemplo tomado de Stackoverflow (hay que Googlear un poco...): https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*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;

    }
 
}
/** FF*/
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;

}

Y aquí más ejemplos: https://freefrontend.com/css-range-sliders/

Recordaba que se podía hacer pero no como. Un poco de Google y listo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar