input type='range' STYLE CSS

1.Anular estilos por defecto

Tenemos que anular los estilos por defecto que tienen los navegadores de input = 'range' .

input[type='range']
 {-webkit-appearance: none;
 background: transparent /* quitamos estilos es moz y webkit lo ponemios transparente */

 width: 100%; /* En firefox es requerido poner el ancho */
}

1.Anular estilos por defecto II

Tenemos que anular los estilos por defecto que tienen los navegadores de input = 'range' .

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

         -webkit-appearance: none;
}

1.Anular estilos por defecto III

Tenemos que anular los estilos por defecto que tienen los navegadores de input = 'range' .

input[type=range]:focus {
  outline: none; /*Elimina el borde azul. Se debería dar estilo de enfoque por razones de accesibilidad */
}

1.Anular estilos por defecto IV

Tenemos que anular los estilos por defecto que tienen los navegadores de input = 'range' .

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Oculta el control deslizante para agregar estilos personalizados */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

2.Thumb webkit

Thumb  es el botón o el control de la barra de desplazamiento .

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; /* hay que darle valor negativo, solo a este navegador */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
}

2.Thumb mozilla

Thumb  es el botón o el control de la barra de desplazamiento .

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

2.Thumb Explorer

Thumb  es el botón o el control de la barra de desplazamiento .

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

2.Track webkit I

Track es la barra de desplazamiento .

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

2.Track webkit II

Track es la barra de desplazamiento .

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

2.Track mozilla I

Track es la barra de desplazamiento .

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

2.Track explorer I

Track es la barra de desplazamiento .

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

2.Track explorer II

Track es la barra de desplazamiento .

input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

2.Track explorer III

Track es la barra de desplazamiento .

input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}

2.Track explorer IV

Track es la barra de desplazamiento .

input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

2.Track explorer V

Track es la barra de desplazamiento .

input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

Generador de type=range

http://danielstern.ca/range.css/?ref=css-tricks#/

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html