¿Cómo creo un control deslizante de rango en HTML + CSS?

¿Te imaginas la carga de aumentar el volumen de la computadora con la casilla de verificación desplegable? ¿Qué le parece ingresar texto o números para dejar una reseña, en lugar de hacer clic en su calificación de estrellas? Estoy seguro de que puede imaginar cuánto más inconveniente sería esto en comparación con el uso de un control deslizante de rango al que normalmente tiene acceso.

Entre los muchos elementos de formulario nuevos introducidos en HTML5, el control deslizante de rango es uno de los más utilizados. Anteriormente, necesitaba JavaScript para crear un control deslizante simple. Por suerte para nosotros, solo puedes crearlo con HTML. En esta publicación, vamos a discutir cómo personalizar y diseñar un control deslizante HTML con un resaltado visual CSS.

¿Qué es un control deslizante de rango en HTML?

Un control deslizante de rango es la entrada en la que selecciona un valor de un control o control deslizante. Podemos mover el volante hacia la derecha o hacia la izquierda para obtener cobertura. Por lo general, cuando manipula la configuración de volumen o brillo en su computadora, puede encontrar un control deslizante. El control deslizante puede tener un ícono en un extremo de la barra o un ícono en ambos extremos de la barra para seleccionar un rango específico usando JavaScript. Vea la diferencia a continuación:

El control deslizante de rango es útil en las siguientes condiciones:

Conoce los límites superior e inferior del rango.
Debe tener acceso a una amplia variedad de números.
Espera que el usuario modifique su entrada con frecuencia (por ejemplo: control de volumen).

Comenzaremos creando un archivo HTML y CSS. Sumerjámonos.

Crear un control deslizante con HTML + CSS

Entrar en el control deslizante HTML

Para comenzar, pegue el siguiente código en su entorno de codificación elegido. Para resultados rápidos, CódigoPen es una gran opción. Los resultados muestran un control deslizante básico que se puede ajustar de 0 a 200.

 <div class="slider">
<input type="range" min="0" max="200" value="100" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">100</p>
</div>

Desglose HTML

Ahora vamos a desglosar este código:

– nombre de la clase «Cremallera» envuelve todo el código HTML, incluido div, para fines de estilo CSS. Nombraremos esta clase en nuestro archivo CSS.
– «recepción» tipo de entrada le permite especificar un valor numérico que no puede ser menor o mayor que el valor dado. En nuestro caso, usaremos la entrada para crear el control deslizante. El rango predeterminado es de 0 a 100. Puede establecer límites en los números aceptados utilizando los atributos a continuación.
Atributos comunes
- min – el valor mínimo permitido en el rango. El valor predeterminado es 0.
- máximo – el valor máximo permitido en el rango. El valor predeterminado es 100.
- paso – el número legal de intervalos en el rango. El valor predeterminado es 1.
- valor – valor predeterminado o valor inicial después de cargar la página. En la mayoría de los casos, el valor predeterminado está a medio camino entre el número mínimo y máximo, pero puede cambiarlo por el que desee. En nuestro ejemplo, después de que se haya cargado la página, el botón deslizante ya debería ser 100.
oninput = «rangeValue.innerText = this.value»>,
10
– Por defecto, la entrada de rango no representa la lectura numérica de su valor. Por lo tanto, asignamos una variable «en la entrada« a rangeValue para mostrar un rango de números. los
etiqueta simplemente imprime un valor numérico en la pantalla.

Entrada de control deslizante CSS

Como puede ver, un control deslizante muy simple solo se puede crear con HTML. Sin embargo, es posible que deseemos agregar una experiencia visual más positiva para mejorar la experiencia del usuario. Puede hacerlo pegando el siguiente código CSS en su entorno de codificación. Los resultados mostrarán un control deslizante de rango de color con un borde alrededor.

 body {
background: linear-gradient(to right, red, yellow);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider p {
font-size: 26px;
font-weight: 600;
font-family: Open Sans;
padding-left: 30px;
color: black;
}
.slider input[type="range"] {
-webkit-appearance:none !important;
width: 420px;
height: 2px;
background: black;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height:30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}

Hemos creado un nombre de clase en el código HTML. «Cremallera» y agregó estilo CSS a todo en la clase. Siéntase libre de personalizar el código CSS a su gusto.

Resultados

Excelente. Ahora ha creado un control deslizante de rango y comprende sus entradas y atributos. Sus resultados deberían ser algo como esto:

Más ejemplos de controles deslizantes

Si desea personalizar aún más su control deslizante, eche un vistazo a estos ejemplos.

Crear un control deslizante de rango con marcadores

Los controles deslizantes de marcador son útiles si necesita un control deslizante de rango más preciso. En este ejemplo construiremos un control de volumen. Mira abajo.

HTML:

 
<div class="slider">
<label for="fader">Volume </label>
<input type="range" min="0" max="100" value="50" id="fader" 
step="20" list="volsettings">
<datalist id="volsettings">
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>
</div>

CSS:

 body {
background: white);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider label {
font-size: 24px;
font-weight: 400;
font-family: Open Sans;
padding-left: 10px;
color: black;
}
.slider input[type="range"] {
width: 420px;
height: 2px;
background: black;
border: none;
outline: none;
}

Resultados:

Crear un control deslizante de rango vertical

El control deslizante de rango vertical es excelente para ahorrar espacio en su sitio web. Vea cómo puede crear un control deslizante de número vertical en el siguiente ejemplo.

HTML:

 
<div class="range">
<input type="range" value="25" min="0" max="50" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">25</p></div>

CSS:

 
.range input {
margin-top:10%;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(270deg);
};

Resultados:

Crear un control deslizante de rango de degradado

Puede agregar un control deslizante de rango de degradado para hacer que su sitio web sea más dinámico. Vea un ejemplo de un control deslizante de degradado a continuación.

HTML:

 <input type="range" min="-100" max="0" value="0" class="range blue"/>

CSS:

 body, html {
background-color: #1d1c25;
margin: 0;
padding: 0;
}
.range {
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
margin-top: 10px;
transform: translate(-50%, -50%);
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: rgba(59,173,227,1);
background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#3bade3 ", endColorstr="#ff357f ", GradientType=1 );
height: 2px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
-moz-appearance: none;
background: rgba(59,173,227,1);
background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#3bade3 ", endColorstr="#ff357f ", GradientType=1 );
height: 2px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2px solid;
border-radius: 50%;
height: 25px;
width: 25px;
max-width: 80px;
position: relative;
bottom: 11px;
background-color: #1d1c25;
cursor: -webkit-grab;
-webkit-transition: border 1000ms ease;
transition: border 1000ms ease;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
border: 2px solid;
border-radius: 50%;
height: 25px;
width: 25px;
max-width: 80px;
position: relative;
bottom: 11px;
background-color: #1d1c25;
cursor: -moz-grab;
-moz-transition: border 1000ms ease;
transition: border 1000ms ease;
}
.range.blue::-webkit-slider-thumb {
border-color: rgb(59,173,227);
}
.range.ltpurple::-webkit-slider-thumb {
border-color: rgb(87,111,230);
}
.range.purple::-webkit-slider-thumb {
border-color: rgb(152,68,183);
}
.range.pink::-webkit-slider-thumb {
border-color: rgb(255,53,127);
}
.range.blue::-moz-range-thumb {
border-color: rgb(59,173,227);
}
.range.ltpurple::-moz-range-thumb {
border-color: rgb(87,111,230);
}.range.purple::-moz-range-thumb {
border-color: rgb(152,68,183);
}
.range.pink::-moz-range-thumb {
border-color: rgb(255,53,127);
}
input[type=range]::-webkit-slider-thumb:active {
cursor: -webkit-grabbing;
}
input[type=range]::-moz-range-thumb:active {
cursor: -moz-grabbing;
}
Resources1× 0.5× 0.25×Rerun

Resultados:

Cree aplicaciones sólidas con el control deslizante HTML

Los controles deslizantes de rango tienen una ventaja sobre un campo de entrada simple cuando necesita acceder a una amplia gama de números. Esto se debe a que puede reducir la cantidad de errores innecesarios causados por entradas inexactas. Hay muchos casos en los que se puede usar un control deslizante de rango, como controles de volumen, calificaciones, puntajes, límites de peso y la lista sigue y sigue. Disfrute aplicando sus propios estilos de control deslizante de rango personalizados al increíble sitio que construirá.

5/5 - (1 voto)