How to put a Slider widget into the Better Exposed Filters for Ubercart price and other product features? How to put a Slider widget into the Better exposed filters and product search result view in Drupal 7 for Ubercart price and other product features?



I have developed an ecommerce shop, and need to a add slider widget to search products.
Jquery UI and most of its widgets are embedded with D7 core, in misc/ui folder. First add these lines to your theme template file (sites/all/themes/YOUR_THEME/template.php) :

/**
 * Implements template_preprocess_views_view().
 */
function YOUR_THEME_preprocess_views_view(&amp;$vars) {//replace YOUR_THEME by your theme name
  $view = $vars['view'];
  switch($view-&gt;name) {      
    case 'YOUR_VIEW' : //replace YOUR_VIEW by your view name

      drupal_add_library('system','ui.slider');
      drupal_add_css('/misc/ui/jquery.ui.slider.css');
      break;
  }
}


Don't forget to clear cache. 

Your filter must be compatible with is between, lower, greater operators. This is fine for  numeric fields. In the filter setup, set it as exposed and choose "is between" operator. 

Last, in views advanced settings, in the BEF setup screen, select Jquery ui slider for your filter and adjust other settings like range at convenience. 

EDIT

To answer your comments, don't edit Bartik or other core files. 
You can easily create a subtheme as following :


Create the folder: /sites/all/themes/vassia
Create the file /sites/all/themes/vassia/vassia.info
put this code in vassia.info

name = vassia
description = my first subtheme
core = 7.x
base theme = bartik

stylesheets[all][] = css/vassia.css
stylesheets[all][] = css/colors.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

Create a file named: /sites/all/themes/vassia/css/vassia.css for your future css custom
If you need colors features, copy the file /themes/bartik/css/colors.css to /sites/all/themes/vassia/css/colors.css and copy the folder and its contents /themes/bartik/color/ to /sites/all/themes/vassia/color/
Go to the the Administration > Appearance page to enable your new subtheme called Vassia


Everything is very well explained in Creating a subtheme DO page. Now the slider part 


Create a file /sites/all/themes/vassia/template.php
Write exactly this code in your template.php file :

&lt;?php 
/**
 * Implements template_preprocess_views_view().
 */
function vassia_preprocess_views_view(&amp;$vars) {
  $view = $vars['view'];
  switch($view-&gt;name) {      
    case 'productviewwithsliders' :

      drupal_add_library('system','ui.slider');
      drupal_add_css('/misc/ui/jquery.ui.slider.css');
      break;
  }
}

Double check the view name. Clear all caches


Enjoy