input type=”range”

La etiqueta <input> en HTML tiene como valor "range" en su atributo type, input type=”range” esto simboliza a un campo de entrada de número dentro de un Rango, con la observación de que la elección de un valor exacto no es muy importante. En la mayoría de los navegadores que soportan este mecanismo este campo de input type=”range” son en su mayoría simbolizados por un deslizador, lo cual permite al usuario final mover sus márgenes superiores e inferiores. Este campo es un variante de la entrada de números qué podría poner práctica en mejores situaciones específicas.

Para el envío de datos del campo input type=”range” pertenecientes al formulario, los navegadores que soportan este mecanismo hacen una conversión esta información en una cadena lo cual simboliza a un número.

Ejemplo

En este presente ejemplo de input type=”range”, crearemos un formulario en el cual usted podrá ver las funcionalidades de este control.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> range</legend>
        <p>Campo de numero dentro de un rango: <br>
            <input type="range" >
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>

Siguiendo con el los ejemplos de input type=”range”, haremos uso de los atributos min = 0 y Max = 200, esto nos permitirá elegir rangos de valores, el usuario final pueda elegir sólo entre estos rangos puestos, por lo general por defecto tiene sus valores de 0 a 100. Por otro lado tenemos el atributo step, el cual le permitirá al usuario final elegir los valores que sean múltiplos de 5, como usted podrá ver en este ejemplo qué desliza de un valor a otro.

<!-- empieza -->
<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> range</legend>
        <p>Campo de numero con rango: <br>
            <input type="range" min="0" max="200" step="5" name="numero">
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>
<!-- HASTA AQUI-->

En este último ejemplo de input type=”range”, haremos uso de la etiqueta <datalist>, el cual nos facilitará un conjunto de sugerencias que el usuario podría elegir entre ellas. También puede depender de la interpretación del navegador que estás utilizando, y en el desplazamiento de este campo aparecerá puntos o algún carácter que represente la sugerencia que pusimos en la <datalist>, funciona mediante el ID de esta etiqueta y del list del control.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> range</legend>
        <p>Campo de numero con rango: <br>
            <input type="range" name="numero" list="lista">
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>
<datalist id="lista">
    <option value="0"></option>
     <option value="50"></option>
      <option value="100"></option>
</datalist>