Novedades y más: Usando JSlider para valorizar Fuel Meter / Medidor de Combustible

Para poder ver los videos sin problemas te recomendamos utilizar Google Chrome o Mozilla

Esta imagen muestra el balance del nivel de gasolina que se puede tener; lo extraje de un proyecto de automotriz dirigido a un aplicativo web, implementando JQuery con el componente JSlider.

Descargamos la versión jquery-1.7.1.js y jquery-ui-1.8.16.custom.min.js del plugin para JQuery, descargar aquí

Una vez obtenido el código, pasaremos a crear nuestra página web.

/* INICIO DE CÓDIGO */

<html>

<head>

$( "#fuel" ).slider({ //El nombre fuel es el id del div

value:2,

min: 0,

max: 4,

step: 1,

slide: function( event, ui ) {

$( "#f_fuel" ).val( ui.value );

}

});

$( "#oil" ).slider({ //El nombre oil es el id del div

value:2,

min: 0,

max: 4,

step: 1,

slide: function( event, ui ) {

$( "#f_oil" ).val( ui.value );

}

});

</script>

</head>

<body>

<tr>

</td>

</td>

</tr>

<tr>

<td style="width: 60px;">GASOLINA</td>

<td style="width: 60px;">ACEITE</td>

</tr>

</table>

</body>

</html>

/* FIN DE CÓDIGO */

Con esto podremos implementar el código de nuestro JSlider, el contenido azul es el código html necesario para tener una mejor apariencia como la del dibujo principal.

/* Es el estilo que usará JQuery, escojan el de su conveniencia o pueden mejorar la hoja css para tener una apariencia más a su realidad */

jquery.ui.all.css

Las etiquetas input son las que recibirán los valores según convenga o se escoja pero la colocamos por defecto en value="2" por motivos de personalidad, los intervalos del componente oscilan entre 0 - 4 contando 5 posiciones para establecer el marcador de la gasolina o el aceite.

Nada cuesta comentar, así entenderé que les agradó este artículo.

Para poder ver los videos sin problemas te recomendamos utilizar Google Chrome o Mozilla

Usando JSlider para valorizar Fuel Meter / Medidor de Combustible | JQuery