Input range es un control que permite al usuario seleccionar un valor en un intervalo determinado. Es uno de los elementos m s importantes de la forma de una p gina web.
Sin embargo, su representaci n Visual no siempre coincide con el dise o del sitio y puede parecer aburrida y est ndar.
Para que la apariencia de input range coincida con el dise o del sitio, se puede estilizar con CSS.
En este art culo, veremos varias formas de estilizar el rango de entrada con CSS. Cubriremos las propiedades y t cnicas b sicas para ayudarlo a crear controles deslizantes hermosos e intuitivos para seleccionar valores.
En el primer ejemplo, mostraremos c mo cambiar el aspecto del control deslizante input range est ndar. Utilizamos propiedades CSS como background-color, border-radius y box-shadow para crear un fondo degradado, esquinas redondeadas y un efecto de sombra.
Tambi n hemos a adido los pseudoelementos:: before y :: after para crear un control deslizante y un indicador del valor actual.
No olvide que el estilo input range puede no ser est ndar y no es compatible con algunos navegadores. Por lo tanto, es una buena idea verificar su compatibilidad antes de usar el estilo input range en su proyecto.
- Valor del c digo fuente para obtener un rango de entrada estilizado
- C mo estilizar input range en CSS
- Aplicar estilos a input range
- Uso de pseudo-elementos para estilizar input range
- Consejos de estilo de input range
- Elegir el tipo de estilo adecuado input range
- Uso de degradados e im genes de fondo para estilizar input range
- Pregunta-respuesta
- C mo cambio el color del control deslizante en input range?
- Es posible cambiar el estilo de diferentes Estados de input range?
- C mo cambio la altura de la tira antes del control deslizante?
- C mo agrego una sombra a un control deslizante en input range?
- C mo cambio el ancho de la tira antes del control deslizante?
- Es posible agregar una animaci n cuando se cambia el valor de input range?
Valor del c digo fuente para obtener un rango de entrada estilizado
Para crear un rango de entrada estilizado, debe usar una combinaci n de HTML, CSS y JavaScript. Comencemos con el c digo HTML que define la estructura y los controles.
Ejemplo de c digo HTML:
cincuenta
Este c digo crea un input range con un rango de valores de 0 a 100 y un valor inicial de 50. La clase "range-slider" se utiliza como contenedor para dise ar y posicionar elementos.
A continuaci n, podemos usar CSS para crear la apariencia y el estilo deseados. Por ejemplo, podemos agregar un color de fondo, cambiar la altura y el ancho, y establecer el color del control deslizante y la pista.
Ejemplo de estilos CSS:
.range-slider {
position: relative;
width: 300px;
height: 10px;
color de fondo: # ddd;
radio del borde: 5 p xeles;
}
.rango-deslizador .control deslizante {
posici n: absoluta;
parte superior: - 5px;
ndice z: 1;
ancho: 100%;
altura: 10px;
- apariencia de webkit: ninguna;
color de fondo: transparente;
}
.rango-deslizador .deslizador::-webkit-deslizador-pulgar {
- apariencia de webkit: ninguna;
ancho: 20px;
altura: 20px;
radio de borde: 50%;
color de fondo: #3498db;
cursor: puntero;
}
.rango-deslizador .deslizador:: - moz-rango-pulgar {
ancho: 20px;
altura: 20px;
radio de borde: 50%;
color de fondo: #3498db;
cursor: puntero;
}
En este ejemplo, establecimos el ancho y la altura del control deslizante, establecimos el color de fondo, redondeamos los bordes y establecimos la transparencia. Tambi n personalizamos el estilo del control deslizante, incluido su Tama o, forma, color y otras propiedades.
Finalmente, podemos agregar un peque o c digo JavaScript para Mostrar el valor actual del control deslizante y actualizar din micamente el elemento de salida.
var slider = document.getElementById("myRange");
var output = document.getElementById("slider-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
Este c digo obtiene el elemento input range y el elemento de salida, y luego los vincula para que cuando cambie el valor del control deslizante, genere el valor actual. El rango de entrada estilizado est listo para usar!
Usando el c digo anterior, puede crear y dise ar su propio input range de p gina web y adaptarlo a sus necesidades. Use CSS y JavaScript para crear un formulario personalizado interactivo y atractivo.
C mo estilizar input range en CSS
- height: 20px;
-webkit-appearance: none;
width: 200px;
- height: 10px;
- / * establecer la imagen como fondo del control deslizante */
- background-image: url('slider-thumb.png');
background-size: 20px 20px;
background-repeat: no-repeat;
| / * establecer la imagen como fondo de la pista deslizante */ | ||
|---|---|---|
| ::-webkit-slider-runnable-track { | | |
| background-image: url('slider-track.png'); | | |
| background-size: 100% 100%; | | |
| background-repeat: no-repeat; | | |
| } | | |
| } | | |
| ||
| Uso de la biblioteca | Una tercera forma de dise ar input range en CSS es usar bibliotecas prefabricadas como noUiSlider o jQuery UI Slider. Ofrecen amplias oportunidades para dise ar y personalizar el rango de entrada. | Elija una forma adecuada de dise ar input range en CSS seg n sus requisitos y capacidades. Experimente con diferentes estilos para crear una apariencia nica y atractiva para su rango de entrada. |
Aplicar estilos a input range
El estilo de un elemento input range le permite cambiar su apariencia y crear interfaces de usuario interesantes e interactivas. Puede utilizar propiedades CSS y pseudoelementos para hacer esto.
transition: cambia suavemente las propiedades al interactuar con el control deslizante.
Para mejorar la accesibilidad de input range, puede agregar una informaci n sobre herramientas de texto que muestre el valor actual:
- });
- entrada [tipo= "rango"] {ancho: 100%;}
altura
10 p xeles
entrada [tipo= "rango"] { altura: 10 p xeles;}
color de fondo
# ccc
entrada [tipo= "rango"] { color de fondo: #ccc;}
frontera
- radio de borde
- caja-sombra
0 0 rgba de 5 p xeles(0, 0, 0, 0.3)
input[type="range"] { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
cursor
pointer
input[type="range"] { cursor: pointer; }
transition
0.2s
input[type="range"] { transition: 0.2s; }
- En los ejemplos anteriores, solo se utilizan las propiedades b sicas, se pueden combinar y complementar con otras para lograr el efecto deseado.
- Uso de pseudo-elementos para estilizar input range
- Puede usar pseudoelementos para estilizar un elemento input range en CSS
- ::-webkit-slider-runnable-track
- ,
::-webkit-slider-thumb
e
::-moz-range-track
- ,
- ::-moz-range-thumb
- . Con su ayuda, puede cambiar la apariencia del control deslizante y la pista.
Ejemplo de estilo de control deslizante:
| Establezca el Tama o del control deslizante con propiedades | width | e |
|---|---|---|
| height | . | Cambie el color del control deslizante con la propiedad |
| background-color | . | |
| border-radius | . |
|
background-color: #ff0000;
border-radius: 50%;
}
height
.
.
input[type="range"]::-webkit-slider-runnable-track {
El soporte para pseudo-elementos puede variar entre navegadores, por lo que es importante verificar el estilo del elemento input range en diferentes dispositivos y diferentes navegadores.
Consejos de estilo de input range
Input range es un elemento de formulario que le permite seleccionar un valor de un rango espec fico. Estilizar este elemento puede ser til para mejorar la apariencia y la experiencia del usuario. Aqu hay algunos consejos para dise ar el rango de entrada:
Cambie la apariencia del control deslizante: el control Deslizante input range se puede dise ar con los pseudoelementos::-webkit-slider-thumb y::-moz-range-thumb para navegadores en el motor WebKit y Gecko, respectivamente. Puede cambiar el color, el Tama o, la forma y agregar una imagen de fondo del control deslizante para que se adapte mejor a su dise o.
Agregue una imagen de fondo: puede usar la imagen de fondo input range para crear una apariencia m s atractiva. Por ejemplo, puede agregar un fondo degradado o una imagen que muestre el valor actual del rango seleccionado.
Cambie el color de la escala: de Forma predeterminada, la escala input range tiene un color que depende del sistema operativo y del navegador. Puede cambiar el color de la escala con los pseudoelementos:: - webkit-slider-runnable-track y ::- moz-range-track para navegadores en el motor WebKit y Gecko, respectivamente.
A adir etiquetas: puede a adir etiquetas para simplificar la percepci n del valor del rango seleccionado. Las etiquetas se pueden colocar en la escala input range o debajo del control deslizante. Puede usar etiquetas label o crear elementos separados para cada etiqueta.
Cambie la apariencia al enfocar y pasar: para Que los usuarios puedan interactuar f cilmente con input range, puede cambiar su apariencia al enfocar y pasar. Por ejemplo, puede cambiar el color del control deslizante o agregar una animaci n cuando cambie el valor.
Estas son solo algunas de las capacidades de estilo de input range. Es importante recordar que el soporte para el estilo de input range puede variar entre navegadores, por lo que es una buena idea probar su estilo en diferentes plataformas y navegadores.
Elegir el tipo de estilo adecuado input range
Puede utilizar diferentes m todos para dise ar el elemento input range, seg n sus necesidades y preferencias de dise o. Considere algunos de ellos:
Aspecto nativo: si desea conservar el aspecto natural de un elemento, puede utilizar simplemente su dise o est ndar sin estilos adicionales.
Personalizaci n sencilla: para un ajuste m s armonioso del elemento en el dise o, puede superponer algunos estilos CSS, por ejemplo, cambiar el color, el ancho y la altura del control deslizante, agregar una textura de fondo o un patr n.
Simulaci n de control deslizante: para crear opciones de estilo m s complejas e interactivas, puede usar componentes HTML5, gr ficos SVG o bibliotecas de JavaScript que le permiten crear controles deslizantes con diferentes formas, animaciones y efectos.
Es importante recordar que la elecci n del tipo de estilo adecuado de input range depende de los objetivos de dise o, el concepto Visual del proyecto y el comportamiento esperado del elemento en todos los dispositivos.
Estilizaci n