Drupal Technical

[Drupal] How to show jQuery Slider widget with "in between" filter in views in Drupal 7?

Krishna.rp | | 2 min read

In one of our recent projects we had to show a slider for a price range. The slider was to be used to show all products with prices between a minimum and a maximum. If we set filters in they will be shown as text boxes. For our project the client requirement was to show a slider above these text-boxes. See the screenshot. The JQuery UI has a good slider widget which will gives the graphical version of these range. We can use this widget with our views 'in between' clause.

Given below are the steps to implement this.

  1. Download jQuery Update module from drupal.org.(http://drupal.org/project/jquery_update). Install and enable the module.
  2. Download JQuery UI http://jqueryui.com/download. Dont forget to select core and slider checkboxes and a theme.
  3. Extract the downloaded file. Copy js/jquery-ui-1.7.2.custom.min.js and css/jQuery-UI-theme-name/jquery-ui-1.7.2.custom.css into your theme directory.
    Copy the css/jQuery-UI-theme-name/images directory into the same location which is optional.
  4. Include these two files inside your theme.info file.
    Eg: stylesheets[all][] = includes/jquery-ui-1.7.2.custom.css
    scripts[] = includes/jquery-ui-1.7.2.custom.min.js
  5. Create a new view. Then add a numeric field, click "Expose". Select the "Is between" operator there. Add a filter identified by name, say "slider_filter". Then save the view.
  6. Copy the following code to your custom js file.
if (Drupal.jsEnabled) {
  Drupal.behaviors.test = function() {
    // NOTE: the exposed filter was given a filter identifier of "slider_filter". 
    // adds the "edit-" and "-min/-max" parts.  
    var min = $('input#edit-slider-filter-min');
    var max = $('input#edit-slider-filter-max');
    
    if (!min.length || !max.length) {
      // No min/max elements on this page
      return;
    }
    
    // Set default values or use those passed into the form
    var init_min = ('' == min.val()) ? 0 : min.val();
    var init_max = ('' == max.val()) ? 10 : max.val();

     // Set initial values of the slider 
    min.val(init_min);
    max.val(init_max);

    // Insert the slider before the min/max input elements 
    min.parents('div.views-widget').before(
      $('<div></div>').slider({
        range: true,
        min: 0,     // Adjust slider min and max to the range 
        max: 10,    // of the exposed filter.
        values: [init_min, init_max],
        slide: function(event, ui){
          // Update the form input elements with the new values when the slider moves
          min.val(ui.values[0]);
          max.val(ui.values[1]);
        }
      })
    );      // Add .hide() before the ';' to remove the input elements altogether.
  };
}

For proper alignment of buttons please add these css to your current theme's main css file.

#edit-slider-filter-max-wrapper,
#edit-slider-filter-min-wrapper,
#edit-slider-filter-max-wrapper label {
  margin-top: 5px;
  display: inline-block;
}
#edit-slider-filter-min,
#edit-slider-filter-max {
  width: 30px;
}
#edit-slider-filter-max-wrapper label {
  width: 75px;
  text-align: center;
}

Clear the cache. Now it is the time for us to see the new slider price range.

Hope this helps somebody. If you have any feedback regarding the article use the comment form below.

Reference:
http://drupal.org/node/766974

 

 

Related Topics