Si te gustaría cambiar los campos Select, mejor conocidos cómo cajas de selección, de los formularios HTML por un bonito Slider o barra deslizante, esto es posible gracias a un plugin para jQuery UI llamado Slider Component, en la siguiente imagen podemos ver un ejemplo de cómo podemos convertir 2 Select Boxes en un Slider que está más abajo de color verde.
De Select Box a Slider
Lo mejor de todo es que para hacerlo es muy fácil, sólo debemos de tener nuestro Select Box cómo por ejemplo el siguiente:
<label for="speed">Selecciona la velocidad:</label>
<select name="speed" id="speed">
<option value="Slower">Muy lento</option>
<option value="Slow">Lento</option>
<option value="Med" selected="selected">Medio</option>
</select>Adjuntar previamente el Script de jQuery UI y Slider Component a nuestro documento HTML y llamar a la función por medio de este código JavaScript que vamos a poner entre las etiquetas <head> y </head> de nuestro documento HTML.
$('select#speed').accessibleUISlider();Así de fácil es. Enlace para descargar Slider Component y jQuery UI.
2 Comentarios (Agrega el tuyo)
He intentado poner en practica el ejemplo, pero no me funciona, me dice :
$(”select#speed”).accessibleUISlider is not a function
Anteriormente, le he añadido los javascript de jquery y jquery-ui.
Hola Jose,
el problema es que estás llamando mal a la función, para que el sistema vea que es una función tienes que ponerle los paréntesis al final del nombre, sería así
$(’select#speed’).accessibleUISlider();
tal y como está en el artículo.
Un saludo.