Range Slider con jQuery UI

En este artículo vamos a ver un poco como funciona el range slider de jQuery UI. Es un herramienta muy útil cuando quieres filtrar por ejemplo por precio un serie de registros.

En el ejemplo que vamos a ilustrar vamos a mostrar un rango de precios de entre 0 y 300€. El usuario podrá elegir un acotar los rangos y enviando ese rango mediante un formulario podemos filtrar los registros (productos) que tengan o estén en ese rango seleccionado.

range

Para disponer de este filtro en nuestras páginas Webs será necesario que añadamos en la cabecera de la página HTML la librería jQuery, el custom de jQuery UI, la llamada al plugin y los estilos de jQuery UI.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [0, 300],
        slide: function(event, ui) {
            $("#amount").val(ui.values[ 0 ] + "EUR-" + ui.values[ 1 ] + "EUR");
        }
    });

    $( "#amount" ).val($("#slider-range").slider("values", 0) + "EUR-" + $("#slider-range").slider( "values", 1) + "EUR");
});
</script>

Los archivos que se están incluyendo los puedes conseguir personalizados en jqueryui.

Después lo que hacemos es emplear el plugin slider para obtener el filtro de precios con rango de 0 a 300€.

En el <body> tendríamos un formulario como el siguiente:

<form action="index.php" method="post">
<p>
<label for="amount">Rango de precios:</label>
<input type="text" id="amount" name="range" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range" style="width:300px;"></div>
<p><input type="submit" name="send" value="Enviar" /></p>
</form>

Fíjate en el input con id=»amount» estamos visualizando los valores del rango seleccionado.

El objetivo de esta entrada es utilizar esta extensión de jQuery UI pero en el ejemplo en funcionamiento hemos ido más allá interactuando directamente con una base de datos de un Prestashop y lo que estamos filtrando son productos o servicios.

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(9 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

8 respuestas a “Range Slider con jQuery UI”

  1. Javi dice:

    Buenos días,

    ¿Cómo se podría hacer para que desde el móvil se pueda deslizar cada punto? Actualmente debes ir haciendo click sobre la barra entre un punto y en otro.

    Gracias.

    • Jose Aguilar dice:

      Hola buenas tardes,

      Revisa si el plugin tuviera alguna opción para eso. Si no la tiene, quizá puedas ponerte en contacto con el desarrollador del plugin para comentárselo o buscar otra alternativa. Seguro que hay alguna opción optimizada para dispositivos móviles.

      Saludos

  2. Adriana dice:

    Buenas tardes,
    Y sí quisiera introducir los valores manualmente y que el slider se moviera?
    Que debería hacer?
    Muchas gracias!

    • Jose Aguilar dice:

      HOla buenas tardes,

      Tenga en cuenta que estamos utilizando un plugin ya preparado. Si lo quiere personalzar tanto posiblemente necesita hacerlo nuevo o revisar si puede modificar el plugin a su antojo.

      Saludos

  3. Adriana dice:

    Buenas,
    He intentado hacer lo mismo pero no consigo que los valores se impriman en pantalla.
    ¿Qué puedo estar haciendo mal?
    He utilizado el código este que pusiste:
    $range_parts = explode(‘-‘, $_POST[‘range’]);
    $inicio = substr($range_parts[0], 0, -3);
    $fin = substr($range_parts[1], 0, -3);
    Con echos para escribir en pantalla despues de pulsar el botón de enviar, pero no sale nada.
    Gracias!

  4. Gustavo Más dice:

    como se haría para obtener los datos filtrados si tengo una base de datos mysql con codificacion php???

    favor responder a mi correo, gracias!!

    • Jose Aguilar dice:

      Hola buenas tardes,

      En el ejemplo en funcionamiento estamos recogiendo los datos del rango elegido con php de la siguiente forma:

      $range_parts = explode(‘-‘, $_POST[‘range’]);
      $inicio = substr($range_parts[0], 0, -3);
      $fin = substr($range_parts[1], 0, -3);

      Y luego haciendo una query relacionada sacanado la información de un prestashop en este caso (Fíjate en la condición del WHERE):

      SELECT p.id_product, pl.name, pl.link_rewrite, price, pl.description_short
      FROM `ps_product` p
      LEFT JOIN ps_product_lang pl ON ( pl.id_product = p.id_product AND pl.id_lang =1 )
      LEFT JOIN `ps_tax` t ON ( t.`id_tax` = p.`id_tax_rules_group` )
      WHERE p.active =1 and p.price >= «.$inicio.» AND p.price <= ".$fin." ORDER BY p.price DESC Inicialmente, deberás conectar a la base de datos, yo lo suelo hacer con mysqli. Y después muestras los resultados como quieras.

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre