Este tipo de input muestra una barra de desplazamiento o slider que permite asignar un número. Como el input type number permite los atributos min, max y step. La diferencia entre un input number y un input range es que el range se suele utilizar para cuando no es importante obtener un valor exacto. Como otros elementos HTML 5, cada navegador tiene un diseño predeterminado diferente.
|
1 2 3 4 5 6 |
<form> <label for="rating">Valora nuestro servicio del 1 al 10: </label> <input type="range" min="1" max="10" id="valoracion" name="valoracion" type="range"> <input type="submit" value="Validar"> </form> |
Input range en firefox
Como podrás observar no se muestra ningún valor. Esto se debe a que a la hora de usar un input range no es importante obtener un valor exacto como dije anteriormente.
Mostrar el valor con jQuery
En el ejemplo anterior has visto que el slider no muestra el valor seleccionado. Sin embargo, hay una solución sencilla con jQuery.
Para comenzar añadiremos un <label> donde se mostrará el valor del range.
|
1 |
<label for="rating">Valora nuestro servicio del 1 al 10: <label id="valor-range"></label> </label> |
Dentro del <head> introducimos el siguiente código. Llamará a una biblioteca jQuery que es fundamental y a mayores estará el código que se encargará de mostrar el valor del input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Al cargar la página realiza una serie de acciones $('#valor-range').html($("#valoracion").val()); /* Al cargar la página se mostrará en el label "valor-range" el valor del input */ $('#valoracion').change(function() { /*Cada vez que el range cambie de valor, se cambiará el texto del label valor-range con el valor del input */ $('#valor-range').html($(this).val()); }); }); </script> |
Visualización del valor del range
Atributos más usados
Como en otros post sobre etiquetas HTML5 os hablaré de los atributos que podeís utilizar con este elemento:
- disabled: Permite desactivar el input.
- form: Permite asociar el form al input introduciendo el id del form.(form = «valoracion»).
- step: Establece el intervalo de suma o resta en el range.(step=»2″).
- min y max: Estos atributos establecen el valor mínimo y máximo del range.
- required: Establece que el input debe ser rellenado. Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).
Y aquí termina el post de hoy, espero que os haya gustado. A seguir picando 🙂