¿Cómo se personaliza el tipo de rango de entrada HTML5 con CSS?

Question

Quiero personalizar el aspecto del tipo de entrada de rango en HTML5 para que parezca una barra de progreso. Intenté aplicar algunos atributos comunes de CSS usando clases CSS, pero parece que no están funcionando.

¿Alguien me puede indicar cómo personalizarlo?

Answer 1

El <input type="range"> es bastante nuevo y que ya están tratando de personalizarlo con CSS. :)

No intentaría esto por dos razones:

1. no podrían ser enormes problemas de compatibilidad ahora y en los próximos (o muchos) años. Piensa que en la actualidad un control de formulario como <select> (disponible desde que comenzó la web) sigue siendo problemático para ser personalizado con CSS de forma cruzada. Por ejemplo, si configuras un padding para los cuadros de selección, muchos navegadores (IE7, OPERA9, CHROME5, SAFARI4) ignorarán por completo el relleno. Funciona solo IE8 y en FF 3.6. (todas las pruebas se realizaron con HTML5 DOCTYPE, por lo que en modo estándar).

2. El <input type="range"> ha sido creado para mostrar un control deslizante NO una barra de progreso, en un intento de hacer trampa en ella con CSS con el fin de transformar un control deslizante en la barra de progreso que suena extraño. Como intentar usar CSS para cambiar un <textarea> en una tabla, pero ¿por qué simplemente no usa un <table> para representar las tablas?

Para mostrar una barra de progreso en HTML5 se debe seguir la sugerencia dada por marcgg en su respuesta. Dado que no hay ningún navegador está actualmente rendereing que usted podría utilizar un div sencilla con una p en el interior de esta manera:

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;"> 
    <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p> 
</div> 

Después, simplemente actualizar la style.width del interior P elemento en porcentaje como:

width: 75% 

FYI: si querer hacer eso en JS simple aquí está el código:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%'; 

Answer 2

Si está utilizando HTML 5, ¿por qué no utiliza la etiqueta progress?

<progress value="1534602" max="4603807">33%</progress> 

Answer 3

Usted puede en Webkit, a través de la pseudo-elemento -webkit-slider-thumb: http://jsfiddle.net/leaverou/BNm8j/

input[type=range] { 
 
    -webkit-appearance: none; 
 
    background-color: silver; 
 
    width: 200px; 
 
    height:20px; 
 
} 
 

 
input[type="range"]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    background-color: #666; 
 
    opacity: 0.5; 
 
    width: 10px; 
 
    height: 26px; 
 
}

<input type="range" min="0" max="100" />

Aunque los otros tienen razón acerca de la entrada type="range" no ser el elemento adecuado para el trabajo.

debería usar el elemento <progress> y para los navegadores que lo soportan, este polyfill: http://lea.verou.me/polyfills/progress/

Answer 4

input[type='range'] { 
    -webkit-appearance: none !important; 
    background:red; 
    height:7px; 
} 
input[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    background:blue; 
    height:10px; 
    width:10px; 
} 

Answer 5

puede editar el CSS de la entrada de gama, utilizando input[type="range"]::-webkit-slider-thumb y input[type="range"].

Aquí está el ejemplo de ella,

http://webstutorial.com/range-input-slider-html5-css3/html-5

Sé que esto ya está contestada pero sólo compartirlo.

Answer 6

jQuery Tools proporciona un complemento que crea elementos personalizables a partir de una entrada de rango, y lo que es más, hace que funcione como un control deslizante en navegadores más antiguos que no admiten input[type=range].

le permite a estilo:

• el mango
• el deslizador
• llenar el progreso opcional
campo de salida
• valor

Lo he utilizado muchas veces y es una gran herramienta.

ADVERTENCIA: no funciona en dispositivos táctiles. No tengo tanta experiencia con ella, pero se puede tratar el deslizador móvil jQuery: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html

Answer 7

Ver http://afarkas.github.io/webshim/demos/demos/webforms/styler/index.html?range

Es una herramienta que produce código multi-navegador al estilo tanto nativos como webshims rango de entradas como desee.

.ws-range, input[type="range"] { 
    /* Range styles: width, height, border-radius, background */ 
    -webkit-appearance: none;cursor: pointer;border: 0;outline: none;padding: 0;margin: 20.5px 0; 
} 
.ws-range .ws-range-thumb { 
    /* Thumb styles: width, height, border, border-radius, background */ 
} 
.ws-range.ws-focus .ws-range-thumb { 
    /* Thumb focus styles: border-color, background */ 
} 
.ws-range.ws-active .ws-range-thumb { 
    /* Thumb active styles: border-color, background */ 
} 
.ws-range .ws-range-min { 
    /* Thumb progress styles: display, background */ 
    border-radius: /* same as range */; 
    height: 100%; 
} 
input[type="range"]::-moz-range-track { 
    border: none;background: transparent; 
} 
input[type="range"]::-ms-tooltip { 
    display: none; 
} 
input[type="range"]::-webkit-slider-thumb { 
    /* Thumb styles: width, height, border, border-radius, background */ 
    -webkit-appearance: none; 
} 
input[type="range"]::-ms-track { 
    /* Range styles: width, height, border-radius, background */ 
    color: transparent;border: 0; 
} 
input[type="range"]::-moz-range-thumb { 
    /* Thumb styles: width, height, border, border-radius, background */ 
} 
input[type="range"]::-ms-thumb { 
    /* Thumb styles: width, height, border, border-radius, background */ 
} 
input[type="range"]:focus::-webkit-slider-thumb { 
    /* Thumb focus styles: border-color, background */ 
} 
input[type="range"]:focus::-moz-range-thumb { 
    /* Thumb focus styles: border-color, background */ 
} 
input[type="range"]:focus::-ms-thumb { 
    /* Thumb focus styles: border-color, background */ 
} 
input[type="range"]:active::-webkit-slider-thumb { 
    /* Thumb active styles: border-color, background */ 
} 
input[type="range"]:active::-moz-range-thumb { 
    /* Thumb active styles: border-color, background */ 
} 
input[type="range"]:active::-ms-thumb { 
    /* Thumb active styles: border-color, background */ 
} 
input[type="range"]::-moz-range-progress { 
    /* Thumb progress styles: display, background */ 
    border-radius: /* same as range */; 
    height: 100%; 
} 
input[type="range"]::-ms-fill-lower { 
    /* Thumb progress styles: display, background */ 
    border-radius: /* same as range */; 
    height: 100%; 
} 
.no-cssrangeinput input[type="range"] { 
    background: transparent;margin: 0;border: 0;min-height: 51px; 
} 

Answer 8

Cuando miré esta pregunta, necesitaba algo simple. Ya hay una serie de respuestas marco sobre cómo hacer esto, pero a veces es más ligero y flexible solo para crear el suyo. Por supuesto, obtienes una cierta cantidad de forma gratuita con un marco (y a menudo es la opción correcta si es una buena opción), pero luego tienes que preocuparte por la compatibilidad del marco, soporte y excavación en las profundidades del marco para ir fuera de sus fronteras

Aquí hay un control deslizante simple solo de javascript. Básicamente es un img para el control deslizante, un img para el botón y una devolución de llamada con un porcentaje de progreso. No es un control deslizante que canta y baila, sino algo simple de construir.

The demo

El HTML

<div id='bb_sliderContainer' ondragstart="return false;" ondrop="return false;"> 
    <img id='bb_slider' src='slider.png'/> 
    <img id='bb_sliderButton' src='sliderbutton.png'/> 
</div> 

El guión

Colocar en un archivo javascript:

(function(bb,undefined){  
bb.Slider = function(buttonCssId,sliderCssId,initialPercentage,progressUpdate) 
{ 
    var halfButtonWidth = 5; 
    var sliderMoving = false; 
    var buttonElement = document.getElementById(buttonCssId); 
    var sliderElement = document.getElementById(sliderCssId);     
    var length = sliderElement.clientWidth;     
    var leftPos = 0; 
    var rightPos = leftPos + length; 
    length = rightPos - leftPos;    

    if(initialPercentage) 
    { 
     var buttonPos = leftPos + initialPercentage/100 * length; 
     buttonElement.style.left = buttonPos - halfButtonWidth + 'px'; 
    }   

    buttonElement.addEventListener('mousedown', function(){ 
     sliderMoving = true; 
    });   

    document.addEventListener('mousemove', function(event){ 
     if(sliderMoving == true) 
     {      
      var rect = sliderElement.getBoundingClientRect();                   
      var mouseX = event.clientX - rect.left; 
      var prop = mouseX/length; 
      if(prop < 0) 
      { 
       prop = 0; 
       mouseX = 0; 
      } 
      if(prop > 1) 
      { 
       prop = 1; 
       mouseX = length; 
      }     
      buttonElement.style.left = leftPos + prop * length - halfButtonWidth + 'px';     
      progressUpdate(prop * 100);   
     } 
    }); 
    document.addEventListener('mouseup', function(){ 
     sliderMoving = false; 
    }); 
}  
}(window.bb = window.bb || {})); 

Ejemplo utilizar

HTML:

<img src='space.png' style='width:50%;position:relative;top:20px' id='bb_sliderSubject'> 

Javascript:

function sliderUpdate(percentage) 
{ 
    var sliderSubject = document.getElementById('bb_sliderSubject'); 
    sliderSubject.style.width = percentage + '%'; 
} 
window.onload=function() 
{ 
    var slider = new bb.Slider('bb_sliderButton','bb_slider',50,sliderUpdate); 
} 

Answer 9

Este es un ejemplo:

input[type='range'] { 
 
\t -webkit-appearance: none; 
 
\t border-radius: 5px; 
 
\t box-shadow: inset 0 0 5px #333; 
 
\t background-color: #999; 
 
\t height: 10px; 
 
\t vertical-align: middle; 
 
} 
 
input[type='range']::-moz-range-track { 
 
\t -moz-appearance: none; 
 
\t border-radius: 5px; 
 
\t box-shadow: inset 0 0 5px #333; 
 
\t background-color: #999; 
 
\t height: 10px; 
 
} 
 
input[type='range']::-webkit-slider-thumb { 
 
\t -webkit-appearance: none !important; 
 
\t border-radius: 20px; 
 
\t background-color: #FFF; 
 
\t box-shadow:inset 0 0 10px rgba(000,000,000,0.5); 
 
\t border: 1px solid #999; 
 
\t height: 20px; 
 
\t width: 20px; 
 
} 
 
input[type='range']::-moz-range-thumb { 
 
\t -moz-appearance: none; 
 
\t border-radius: 20px; 
 
\t background-color: #FFF; 
 
\t box-shadow:inset 0 0 10px rgba(000,000,000,0.5); 
 
\t border: 1px solid #999; 
 
\t height: 20px; 
 
\t width: 20px; 
 
}

<input type="range">

Answer 10

Hice una solución de varios navegadores (+ IE9, FF, Chrome, Safari), solo CSS.

[Actualizado 24/11/2016]

http://codepen.io/nlfonseca/pen/MwbovQ

@import 'bourbon'; 

$slider-width-number: 240; 
$slider-width: #{$slider-width-number}px; 
$slider-height: 2px; 
$background-slider: #c7c7c7; 
$background-filled-slider: #e33d44; 
$thumb-width: 28px; 
$thumb-height: 18px; 
$thumb-radius: 8px; 
$thumb-background: #fff; 
$thumb-border: 1px solid #777; 
$shadow-size: -8px; 
$fit-thumb-in-slider: -8px; 

@function makelongshadow($color, $size) { 
    $val: 5px 0 0 $size $color; 

    @for $i from 6 through $slider-width-number { 
    $val: #{$val}, #{$i}px 0 0 $size #{$color}; 
    } 

    @return $val; 
} 

div { 
    height: 100px; 
    display: flex; 
    justify-content: center; 
} 

input { 
    align-items: center; 
    appearance: none; 
    background: none; 
    cursor: pointer; 
    display: flex; 
    height: 100%; 
    min-height: 50px; 
    overflow: hidden; 
    width: $slider-width; 

    &:focus { 
    box-shadow: none; 
    outline: none; 
    } 

    &::-webkit-slider-runnable-track { 
    background: $background-filled-slider; 
    content: ''; 
    height: $slider-height; 
    pointer-events: none; 
    } 

    &::-webkit-slider-thumb { 
    @include size($thumb-width $thumb-height); 

    appearance: none; 
    background: $thumb-background; 
    border-radius: $thumb-radius; 
    box-shadow: makelongshadow($background-slider, $shadow-size); 
    margin-top: $fit-thumb-in-slider; 
    border: $thumb-border; 
    } 


    &::-moz-range-track { 
    width: $slider-width; 
    height: $slider-height; 
    } 

    &::-moz-range-thumb { 
    @include size($thumb-width $thumb-height); 

    background: $thumb-background; 
    border-radius: $thumb-radius; 
    border: $thumb-border; 
    position: relative; 
    } 

    &::-moz-range-progress { 
    height: $slider-height; 
    background: $background-filled-slider; 
    border: 0; 
    margin-top: 0; 
    } 

    &::-ms-track { 
    background: transparent; 
    border: 0; 
    border-color: transparent; 
    border-radius: 0; 
    border-width: 0; 
    color: transparent; 
    height: $slider-height; 
    margin-top: 10px; 
    width: $slider-width; 
    } 

    &::-ms-thumb { 
    @include size($thumb-width $thumb-height); 

    background: $thumb-background; 
    border-radius: $thumb-radius; 
    border: $thumb-border; 
    } 

    &::-ms-fill-lower { 
    background: $background-filled-slider; 
    border-radius: 0; 
    } 

    &::-ms-fill-upper { 
    background: $background-slider; 
    border-radius: 0; 
    } 

    &::-ms-tooltip { 
    display: none; 
    } 
}