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

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 puede dirigirme cómo personalizarlo?

es bastante nuevo y ya está intentando personalizarlo con CSS. 🙂

No probaría eso por dos razones:

  1. puede haber grandes problemas de compatibilidad ahora y durante los próximos (o muchos) años . Piense que en la actualidad un control de formulario como (disponible desde que comenzó la web) sigue siendo problemático para ser personalizado con CSS de forma cruzada. Por ejemplo, si configura 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 ha sido creado para mostrar un control deslizante NO una barra de progreso , intentando engañarlo con CSS para transformar un control deslizante en una barra de progreso, suena extraño. Como intentar usar CSS para cambiar un en una tabla, pero ¿por qué simplemente no usas una

    para representar tablas?

Para mostrar una barra de progreso en HTML5, debe seguir la sugerencia dada por marcgg en su respuesta. Como ningún navegador lo está actualizando, puede usar un div simple con una p dentro así:

 

 

Luego, simplemente actualice el style.width del elemento P interno en porcentajes como:

 width: 75% 

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

 document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%'; 
 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; } 

Si usa HTML 5, ¿por qué no utiliza la etiqueta de progress ?

 33% 

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

[Actualizado el 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; } } 

Puede -webkit-slider-thumb en Webkit, a través del 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; } 
  

Puede editar el CSS de la entrada de rango, usando la input[type="range"]::-webkit-slider-thumb e input[type="range"] .

Aquí está el ejemplo de esto,

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

Sé que esto ya está respondido, pero solo lo comparto.

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 la input[type=range] .

Le permite estilo:

  • el mango
  • el control deslizante
  • llenado de progreso opcional
  • campo de salida de valor

Lo he usado muchas veces y es una gran herramienta.

ADVERTENCIA: no funciona en dispositivos táctiles. No tengo tanta experiencia con eso, pero podrías probar el control deslizante móvil jQuery: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

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

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 callback con un porcentaje de progreso. No es un control deslizante que canta y baila, sino algo simple de construir.

La demo

El HTML

 

La secuencia de comandos

Coloque 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 de uso

HTML:

  

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); } 

Esto es un ejemplo:

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

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

Es una herramienta que produce código entre navegadores para marcar las entradas de rango nativas y webshims 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; }