Add the jQuery slider widget to BEF

Hello,

thank you for this great idea for a patch. I have implemented your patch on: BEF 7.x-3.0-beta1, but when i go to BEF Settings and chose "jQuery Slider" for specific field and click Apply, that does not get saved (after immediately opening BEF Settings that filed is back on Default Double Select list). Any idea?

Can you please post .zip version of the module with your patch that worked?

Thank you

Thank you for the .zip :)
I have tried to apply it on the -dev and beta relese, but it didn't work... So I have asked for the zip version that worked for you :)

hey! i have downloaded the zip with included patch (thank you!), and i have successfully set the BEF to jQuery slider on the needed exposed filter.
But nothing happens.
Maybe i'm missing something? i have downloaded and included in the theme's .info jQuery UI 1.8.22 with css
i have flushed the cash several times
do i need to make some extra steps? i'm using latest dev views and ctools

PS maybe i didn't quite understand your "First, js and css should be added via the drupal_add_library('system','ui.slider') function in the template preprocess area." instructions, but i tried it in several ways with no luck

thanks

same problem like srgk

Im new to drupal. Im using 7.14
Some1 plz tell me hw to apply dat patch?
And is it a jquery range slider patch? If nt plz help me hw to do that
Thanks..

Hi,

I have followed the steps as follow but to no avail. My sliders just wont show.
Tested on Firefox 14.0.1, Chrome 21.0.1180.79 and Internet Explorer Version 10.0.8400.0

-I downloaded and activated the Jquery Update 7.x-2.1+9-dev
-I downloaded jQuery UI (tried both 1.7.3 & 1.8.23)
-Placed the jquery-ui-1.7.3.custom.css & jquery-ui-1.7.3.custom.min.js as well as the images folder inside sites/all/themes/"my theme name"/includes
-created a new empty custom.js file as follow sites/all/themes/"my theme name"/custom.js
-Pasted the code for Drupal 7 custom.js by Nagiek and modified it as follow to match my filter identifier:

(function ($) {
  Drupal.behaviors.customSlider = {
    attach: function() {
      // NOTE: the exposed filter was given a filter identifier of "slider-filter".  Views
      // adds the "edit-" and "-min/-max" parts.  

      var min = $("input#edit-price-min");
      var max = $("input#edit-price-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.
    }
  };

}(jQuery));

-Modified my theme_name.info and added the following right at the top:

; Previous style sheet
stylesheets[all][] = style.css

; New Slider stylesheet
stylesheets[all][] = includes/jquery-ui-1.7.3.custom.css

; New jQuery UI JavaScript 
scripts[] = includes/jquery-ui-1.7.3.custom.js

; Your theme's JavaScript file must come after the jQuery UI file
scripts[] = includes/custom.js

-I made sure my new views exposed filter is numeric field type with "in between" type selected.
-I am using the patched version ZIP file as mentioned above
-I am a bit lost on @Nagiek’s words here: First, js and css should be added via the drupal_add_library('system','ui.slider') function in the template preprocess area.”
When I try to ad the following drupal_add_library('system','ui.slider') code to my template.php I get an error: Parse error: syntax error, unexpected T_FUNCTION.

EDIT: I have managed to get the sliders available as i made a mistake in labelling my filter label instead of filter identifier under the "more" options on the filter settings page.

However, I have decided to not use the slider as it is quite buggy when it gets to big price values such as 0 - 999999999
It will jump to max 100/2000 when the slider is modified as well as the double sliders keep on popping up which also functions differently from one another.

Regards

FridgeWheeL

I was using better_exposed_filters 7.x-3.0-beta2 release date September 13, 2012 at 6:52pm
if I switch for the .zip version of the module on #4, the option for "BEF settings" in the view edit interface stops working
I tried to apply the patch but it doesn´t seem to work, I get this:

aegir:/var/aegir/platforms/drupal-7.15/sites/all/modules/better_exposed_filters# patch -p0 -b < better-exposed-filters-added-slider-1627524-1.patch
can't find file to patch at input line 16
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|From 8b73e808b39d4c33f09e5c2e89909e80c37b4b5c Mon Sep 17 00:00:00 2001
|From: Keigan Ashall <keigan.ashall@gmail.com>
|Date: Mon, 11 Jun 2012 12:49:43 -0400
|Subject: [PATCH] Issue #1627524: Added slider functionality.
|
|---
| better_exposed_filters.info                    |    7 +++-
| better_exposed_filters.js                      |   52 ++++++++++++++++++++++++
| better_exposed_filters_exposed_form_plugin.inc |   38 +++++++++++++++++-
| 3 files changed, 95 insertions(+), 2 deletions(-)
|
|diff --git a/better_exposed_filters.info b/better_exposed_filters.info
|index f069a8b..f00c088 100644
|--- a/better_exposed_filters.info
|+++ b/better_exposed_filters.info
--------------------------
File to patch:

Same thing when trying to patch better_exposed_filters 7.x-3.x-dev October 14, 2011 at 5:33pm

EDIT: by applying the patch manually (editing each file) i got it working although the option for "BEF settings" in the view edit interface does not work you can set the bef to "JQuery Slider" following the url: mysite/admin/structure/views/nojs/display/my_view/my_display/exposed_form_options

I struggled with this for a while and finally figured out what to do to get this to work. You have to set the Filter identifier of your exposed filter to 'slider-filter'. The javascript applies the slider widget to form elements with id edit-slider-filter-min and edit-slider-filter-max. If it can't find those elements, it does nothing.

Here are the steps needed for D7 with BEF 7.x-3.0-beta3

1. Apply the patch. (I had to apply the .info chunk of the patch manually because it failed)
2. In your view go to the Filter Criteria section, select your exposed filter and scroll down to the More section. Open the More section and change the Filter identifier to slider-filter.
3. Go the Advanced view settings and set Exposed form style to Better Exposed Filters.
4. In BEF settings, select jQuery Slider as the display type for your exposed filter.

That's it.

Note, there's no need to download and install jquery ui or do any of the other stuff mentioned in the handbook page. jQuery UI comes bundled with D7, and the patch handles everything else.

There is a bug in the patch that causes the slider range to reset to min=0 and max=100 as soon as you move the slider. The bug is in better_exposed_filters.js where the slider is initialised. The min and max values are incorrectly set to sliderDefaults.init_min and sliderDefaults.init_max. Use the following code instead:

              ...
$('<div></div>').slider({
          range: true,
          step: 50000,
          min: sliderDefaults.min,     // Adjust slider min and max to the range
          max: sliderDefaults.max,     // of the exposed filter.
          values: [init_min, init_max],
              ...

I've rerolled patch at #1 against latest DEV (8 Oct 12) because it completely failed to apply. Also added in the suggestions at #12.

There must be a better UI than changing the filter identifier name? Is there some other way of targeting the jQuery selector? Still not convinced that that this patch is ready, as the modal windows in Views UI don't seem to appear consistently since I applied the patch. This may well need a bit more work.

Open the More section and change the Filter identifier to slider-filter.

and that if i want to have for example 4 sliders?

#1: better-exposed-filters-added-slider-1627524-1.patch queued for re-testing.

my slider didn't show up, but i've fixed...the big problem was that the i from "#edit-" + i + "-wrapper" uses has _ between words and the real id of the element uses -
the fix is after: $.each(Drupal.settings.better_exposed_filters.defaults, function(i, sliderDefaults) { add
i=i.replace(/_/g,"-");
works like a charm!, (after u use display non on the real input)

thanks everyone!

edited: one more little fix:(i think this bug appears on ajax use only...)
change this:

        min: sliderDefaults.init_min,     // Adjust slider min and max to the range 
            max: sliderDefaults.init_max,     // of the exposed filter.

to this:

            min: sliderDefaults.min,     // Adjust slider min and max to the range 
            max: sliderDefaults.max,     // of the exposed filter.

the way it was setted up, after you was changeing the value and submited the form the max and min value gos to 0 and 100....
it didn't rememberd the initial value...this fix it

Thank you, everyone, for your work on this. Adding sliders to numeric filters is definitely on my roadmap for BEF.

However, this patch has several problems

+++ b/better_exposed_filters.infoundefined
@@ -4,10 +4,13 @@ description = Allow the use of checkboxes or radio buttons for exposed Views fil
+files[] = better_exposed_filters.js

We don't want to add BEF's JS code for all pages, just the ones that need it.

+++ b/better_exposed_filters.jsundefined
@@ -98,6 +98,57 @@
+    ¶
...
+    ¶
...
+    ¶
...
+                   ¶

... And other lines: trailing spaces. As well as four-space indents through this section. I can't accept patches that don't follow the Drupal coding standards.

I haven't had a chance to look at the functionality of this patch -- I hope to do that tomorrow... There has been a major refactoring of how/when BEF options are presented to users so this patch may need a rerolled against the latest code.

My apologies for not getting to this issue sooner. I'll try and work on this in the very near future as I want to see jQuery sliders for all numeric filters in BEF.

Thanks.

Here is a new version.

It fixes coding standards issues and has some changes to make the code fit in better with the code that is already in the module (some of which has recently changed since the previous patches).
There is also a couple of bug fixes.

I notice there is some javascript issue when editing filters sometimes, for which there is an issue at #1504560: Multiple Ajax Pagers Break jQuery Once that matches the symptoms.
I will do a bit more investigation later to see if it is caused in any way by this module.

This version also starts to add support for non-range/single value sliders for numeric fields that don't user BETWEEN, however that is a work in progress.

I will be continuing to work on this over the next few days, until it is all working well.

Todo:
* Handle the situation where min & max values are not entered for the exposed filter settings. I guess there is nothing to do except add default values like 0 & 1000000 or something. Any ideas on this one? Another option would be to just disable the slider entirely in the case min & max values are not present (this is what the old patch did).
* Handle non-BETWEEN numeric fields properly. This is limited by the same issue. Min and max values will need to be supplied by the admin or else we have to guess and put 0 & 1000000 or something.
* Lots more testing.

May as well run the test bot.

My solution for min & max values for range and single value sliders will be this:

I think the values set on the filter itself should not be used for min & max values.
This is because those fields are meant for default values.
So I will make min & max values additional settings in the BEF settings area.
This means you can have min & max values that are different to the default value, which is what you would want.

Next patch will have that set-up.

Here is a new and more functional patch.

When you select jQuery slider or jQuery range slider as the widget you now get slider min & max values in the more options areas, which must be filled out.

The default filter value is use purely as a default and if no default value is set then the min & max values of the slider are used (or just the min if you are not using a range slider).

I have tested this with a number of sliders and range sliders on a single page and it is working for my tests (firefox).

This is pretty ready but I will do another review and possibly tidy up a couple of parts and do some more testing across different browsers later tonight.

I did some cross browser testing and there are some issues with IE7 (mode in IE9) but they should be an easy fix.

I also realised it doesn't update the slider if you manually update the text field, only the other way around.

I will address those things tomight.

Here is a new version with the following changes:

• It now updates the slider if you manually update the field. It will not allow you to enter values greater than slider max or less than slider min. It won't allow a min value greater than a max value or a max value less than a min value. It won't allow non-number values.
• Added support for the animate option. In the views UI you can choose animation speed or leave it disabled.
• Added support for orientation. In the views UI you can select horizontal or vertical.
• Minor CSS tweaks so the slider doesn't overlap its corresponding field.

There is still the issue in IE7.
The problem is that the slider div is inside a div that is floating left (.views-exposed-widget) and there are no explicit widths set. IE does not like this and so horizontal sliders end up being extremely short. Vertical ones are ok.
I played around with an IE7 specific stylesheet to fix it but I haven't had luck getting a nice fix.

If there are any pro themers around who have a CSS fix feel free to make my life easier :)

I will also look into potentially making the blur functions (or at least part of them) a reusable function to stop similar code duplication.

Other than that this looks pretty good to me.

Actually there is one other thing.
It currently works on whole numbers and the slider increments by 1.

It might be useful to be able to set the step, and also allow decimal steps.
That would need the step setting, some tweaks to js code that currently forces whole numbers, and some extra validation for when manually editing fields, so that it snaps to the nearest step.

I will do that for the next version.

rooby, Thank you for you work on this. I had a branch that I'd started playing around with adding sliders -- I've attached a diff but it's hardly complete. But it may be able to help you out with a few things -- who knows...

One approach I was thinking of, but hadn't implemented yet, was to give the user a textarea where they could specify any options to pass to the slider() init function. That would allow a lot of customization without adding a flurry of options to the BEF settings form.

Also, if you add any new BEF settings that are to be saved (eg: slider min/max values) you need to add them to the $filter_defaults array in _bef_get_settings() so that users don't get undefined index warnings when they first start using the new code.

Only had a chance to give the patch a quick read. I'll go through it in more details when time allows.

Thanks again!

Thanks for the patch, there is a few little things in there I might use.

I briefly thought about defaults but I figured it was not possible to be using the slider without configuring it (because you have to actively select it) so I put it on the back burner. I'll fix that in the next one.

As for the text area of options, there aren't that many options. My current patch already contains all but one of them.
The benefit of multiple settings is that it is much more user friendly, users don't have to look through and understand the docs, and we can more easily validate their selections.
The downside is there is a bit more code and new options have to be added when they arrive, however they are easy to add and I would imagine it will be rare that they are added.

Will make a new patch with a bunch of changes in the next day or so.

Here is a new version that has had some refactoring.

I have simplified the way a couple of things worked and merged our 2 patches together.

I tried a few different versions of js to see which one was best and again ended up with bits from both our patches.

Tasks I know I still have to do:

• Add the ability to change the step.
• Allow the slider to work with decimals.
• Cross browser testing again after all the changes in this patch and the other todos.
• Test using the datepicker with and without the slider, now that the recent version changes some of the datepicker code.
• Write automated tests.

I will do all that before the end of the week.

bef, latest dev version
applied the patch..

can't found the way to make it work.

that i have to do?

To use:
1. Add exposed filter(s) to the view (it only works for number fields).
2. Go to the better exposed filters settings, in the "Exposed form" part of the "Advanced" settings.
3. In the "Exposed filter settings", select "jQuery UI slider" for your number filters.
4. Configure the slider settings for each filter its "More options for..." section, below where you selected "jQuery UI slider" (these settings may get split out into their own "Slider settings" fieldset in the next patch).

rooby, Thank you for your continued work on this. I'm very excited to see this added to BEF.

As for the text area of options, there aren't that many options. My current patch already contains all but one of them. The benefit of multiple settings is that it is much more user friendly, users don't have to look through and understand the docs, and we can more easily validate their selections.

You've hit the nail on the head. I'm worried about two things: 1) An overwhelming "additional options" section and 2) Keeping BEF up-to-date with options as they are added to various jQuery UI widgets. The second issue concerns not only slider widgets but all other jQUI widgets (eg: datepicker) that we may incorporate in BEF.

Perhaps the compromise would be to have some widget options baked into BEF (as you have done) and leave the rest as a textarea where users can override default values with whatever they want. Perhaps that makes everyone happy?

Yeah, I agree that there are a lot of settings.

My latest version (which I will post today) moves slider settings out of the "More options" area and into their own fieldset (as you had in the patch you posted), which I think helps some.

If we are to go for compromise, I would think it logical to have min, max & step as their own options (because they are the primary functionality) and the others (animate, orientation, whatever future options) in the text area.

Here is a new version that adds the step setting and allows the use of decimals.

There are a few other fixes and cleanups also.

I have done some simple cross browser testing with and without the datepicker and it seems ok except for 2 things:

• The IE7 issue mentioned in #24
• A z-index issue when using datepicker and slider. The slider handles show through the date picker. This is because the datepicker sets the z-index to 1 above the field it is attached to (normally 1), which is below the normal z-index for the slider handle, which is 2. This could be fixed in a few ways:
  • Including css that sets the date picker z-index to a high number using !important.
  • Setting the z-index to a high number in the jQuery using the beforeShow event.
  • Determining the max z-index on the page and adding 1 and setting that as the z-index using the beforeShow event as above.

None of them are ideal really but I guess we have to choose one.

I was only able to get the css and module file to update. I'm using Netbeans to apply the patch.

Here is a re-roll of the patch in #32 that should apply cleanly over latest dev.
No functionality has been changed.

I have also included a zipped version of the module, which is latest dev checked out of git with the patch applied, just in case.

rooby, Thanks for all your work on this! I've committed your latest patch. I'm willing to deal with (or won't fix, as the case may be for IE 7.x) items raised in #32 in other issues in the queue.

Awesome work! I'll buy you a beer if you make it up to DrupalCon Portland!

No worries, and thanks.

I will keep an eye out for any new bugs that might pop up and will make patches in new issues.

Also, my work on this functionality is sponsored by herd45

Has this been committed to the latest dev?

Yes, see #35

FYI, rooby, I added the slider option to the (very in-progress) handbook page of BEF options. I also added mention of your and herd45's participation/sponsorship. Please let me know (or edit the handbook page) if that is not preferred.

That's fine, thanks :)

Thanks mikeker

Is there a way that we can lose this 2 input fields and have something similar to this

Yes, but that's up to the site designer/themer to handle. They can be hidden by CSS or JS (probably best to do with JS so they aren't hidden for folks that don't have JS enabled).

Is there a way that the slider could be made to work with a part of an exposed date filter? I want to use it to select a range of years (e.g. 1926-1999) in a date field. So the year is numeric, but it's part of a date field.
?

Hi again, I'm having difficulty using the slider with an Openlayers map view. Using the latest .dev version, I can get the slider to work fine in a standard view (e.g. exposing NID as a filter) but as soon as I put the same exposed filter into an OL map view, the slider doesn't appear. The numeric field boxes (from... to...) are there but no slider.

This issue was for adding slider support and it has been completed.

Please open new issues for each of your new requests.

It is easier to keep track of everything that way.

Works great. Wanted to add that if someone wants to get the slider working on a mobile device so it drags on touch, they need to add / load the jquery touchpunch js. This will add touch functionality to all jquery ui elements, including the slider.

http://touchpunch.furf.com/

Thanks for the great work!

Thanks for the tip @Exploratus! Works like a charm!

I don't want to open another issue as my questions related to this one. Unfortunately I am no coder, just having some css knowledge.

What exactly was commited here? From my newbie point of view I am not sure which steps for the "between slider" described in the handbook need to be done. Can I just follow the instructions in the handbook (+ comments for D7) or can I leave something out because of the fact that something is committed now?

Sounds like a silly question, but I'd be happy for any clarifications.

@ThuleNB: The BEF handbook pages need to be updated. What was checked in was the ability to use the jQuery sliders in Drupal core for numeric filters, either single value (greater/less than, equals, etc) or two-value (in between) settings. You set the greater/less/between in the filter settings (the operator dropdown) and set the slider options on the BEF settings form.

If that doesn't clarify things, you should probably open an issue requesting the documentation be updated.

Thanks Mike! That helps. However, I already did the setting as you described but the slider didn't appear, just the two boxes. I'll check my settings again and if applicable open a separate issue.

I need to add slider on better exposed filter on drupal 8.
Is there any seggestion??

@mafzalzadeh I would do this:

1. Try out the latest version of D8 BEF and see if the slider has been ported to Drupal 8 yet.
2. If it hasn't, check the issue queue for an existing issue about it.
3. If there isn't an issue specifically for D8 slider functionality, create a new one.
4. Make mention of you new issue in this ticket: #2753111: Finish the Drupal 8 port of Better Exposed Filters

This issue is very old and was specifically for the D7 feature. You won't have much luck with old closed off issues.