Crea un Slider a partir de un campo Select en tus formularios

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

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.

Responder a Félix Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

2 comentarios en “Crea un Slider a partir de un campo Select en tus formularios”

  1. 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.

  2. 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.