Un slider con Bootstrap, algo diferente para implementar en bootstrap, ya conocemos el clásico slider de html5 y si no lo conoces puedes ver este enlace:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range.
Si ya conoces el elemento html5, puede ser que te interese cambiar el aspecto, bueno pues esto lo vas ha lograr con Bootstrap slider que es un plugin para crear aspectos diferentes con jQuery, este plugin tiene la facultad de generar distintos tipos de presentación.
Por ejemplo puedes usar este plugin para convertir una etiqueta tipo input a un simple slider, o si lo prefieres puedes configurar el slider teniendo en consideración lo siguiente:
1.- Un intervalo,
2.- Cambiar de apariencia (colores),
3.- Cambiar de posición horizontal, vertical
4.- Activar y desactivar el componente.
Si gustas puedes ver el ejemplo en la siguiente dirección: http://seiyria.com/bootstrap-slider/ para utilizar el plugin tienes que hacer lo siguiente:
1.- incluir las referencias del plugin, la hoja de estilos y jQuery plugin
<link href="dependencies/css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-slider.css" rel="stylesheet"> <script type='text/javascript' src="dependencies/js/jquery.min.js"></script> <script type='text/javascript' src="js/bootstrap-slider.js"></script>
2.- Crear los componentes html, los cuales se convertirán en elementos slider.
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
3.- Agregamos el código que convertirá el elemento en un slider.
// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
The post Un slider con Bootstrap, algo diferente appeared first on Develoteca.