-Plugin para convertir radios html a slider html

DESCARGA : radioToSlider

Plugin para convertir radios html a slider html, este simple pero poderoso plugin realizado con jQuery te ayudara a presentar tu proyecto con un toque visual y muy interesante en los elementos radio html ,te explicamos como aplicarlo a tu proyecto de forma rápida y efectiva.

Para la implementación de este plugin se necesitan los elementos radio de html, es decir los input que tienen la propiedad type=”radio”, a continuación te mostramos un ejemplo de esta etiqueta html que tiene como valor del id option1:


 <input id="option1" name="options" type="radio">

Una vez que conoces los elementos a los que les puedes aplicar este cambio visual te mostramos la implementación de este plugin que consta de unos simples pasos que serán descritos en la siguiente lista:

1.- Incluir jQuery que es el framework que utilizaremos en nuestro archivo.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"
 ></script>

2.- Incluir archivos css que vendrá en la carpeta del plugin.

<link rel="stylesheet" type="text/css" href="css/radios-to-slider.css" />

3.- Incluir el archivo js que también vendrá en la carpeta del plugin.

<script type="text/javascript" src="js/jquery.radios-to-slider.js"></script>

4.- Crear los elementos html que se convertirán el slider.

<div id="radios">
 <input id="option1" name="options" type="radio">
 <label for="option1">1 year</label>
 <input id="option2" name="options" type="radio">
 <label for="option2">2 years</label>
 <input id="option3" name="options" type="radio" checked>
 <label for="option3">3 years</label>
 <input id="option4" name="options" type="radio">
 <label for="option4">4 years</label>
 <input id="option5" name="options" type="radio">
 <label for="option5">5+ years</label>
</div>

5.- Crear la referencia para convertir los elementos radio html en slider.

$('#radios').radiosToSlider();

En conclusión podemos decir que el plugin realiza un cambio visual que te tomaría muchas horas en construir si lo hicieras desde cero, por otra parte este plugin esta limitado en el diseño visual ya que se presenta de un solo color y una sola forma, nada que no se pueda modificar con los estilos.

Si consideras usar este plugin cuéntanos donde lo usaste.

 

You may also like...