[Resolved] range slider of custom field

[Author]

Posts

[Ido Angel]

hey,
i've searched the forum but couldn't come up with a solution.
i know how to set a filter of min and max values of a custom numeric field (using the BETWEEN option). but i'm trying to get the filter to work as a range slider - and fail :\
i've tried adding the JS from here:

https://toolset.com/forums/topic/parametric-search-numeric-slider-for-price-range/

but nope.

thanks!

[Christian Cox]

Okay how can I help? If you can show me what you have so far, I can try to provide assistance, but I'm not able to create this for you from scratch as per our support policy. This is an unsupported extension of Toolset. I can help you if you get stuck somewhere, but I need to be able to see what's going wrong.

[Ido Angel]

thanks Christian 🙂

here's the filter:

<div class="search">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<h2>[wpml-string context="wpv-views"]Category[/wpml-string]</h2>
	[wpv-control-post-taxonomy taxonomy="things-category" type="checkboxes" url_param="wpv-things-category"]
</div>
<div class="form-group">
  [wpml-string context="wpv-views"]Price[/wpml-string]
	<label>[wpml-string context="wpv-views"]Min Price[/wpml-string]</label>
	[wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_min"]
</div>
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Max Price[/wpml-string]</label>
	[wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_max"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]
</div>

and here's the loop:

<div class="results">
  [wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<table width="100%">
		<thead>
			<tr>
				<th>[wpv-heading name=""][/wpv-heading]</th>
				<th>[wpv-heading name="post-link"]Name[/wpv-heading]</th>
				<th>[wpv-heading name="types-field-thing-price"]Price[/wpv-heading]</th>
              	<th>[wpv-heading name=""]Category[/wpv-heading]</th>
				<th>[wpv-heading name="post-title"][/wpv-heading]</th>
			</tr>
		</thead>
		<tbody class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<tr>
				[wpv-post-body view_template="Loop item in Things Filter"]
			</tr>
		</wpv-loop>
		</tbody>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]
</div>

and finally the template:

<td><a href='[wpv-post-url]'>[wpv-post-featured-image]</a></td>
<td>[wpv-post-link]</td>
<td>[types field='thing-price'][/types]$</td>
<td>[wpv-post-taxonomy type="things-category" format="name"]</td>
<td><a href="#">Add to Cart</a></td>

i've tried using either this code:

jQuery(function($) {
  $( "#amount" ).slider({
    range: true, 
    min: 0,
    max: 500
  });
});

or this one:

2
3
4
5
6
7
8
9
10
11
12
13
$("#price-slider").slider({
    range: true,
    min: 0,
    max: 1000000,
    step: 10000,
    values: [0, 1000000],
    slide: function(event, ui) {
        $('#wpv_control_textfield_min-price').val(formatNumber(ui.values[0]));
        $('#wpv_control_textfield_max-price').val(formatNumber(ui.values[1]));
}});
$('#wpv_control_textfield_min-price, #wpv_control_textfield_max-price').change(function() {
    $('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_min-price').val()), parseInt($('#wpv_control_textfield_max-price').val())]);
});

with the right amendments of course to my classes and id's. didn't do nothing.

cheers,
ido

[Christian Cox]

First, let me explain best practices for using jQuery inside a View or Content Template's JS panel. Always wrap your jQuery code in a document ready handler, and always use "jQuery" instead of "$" unless you know what you're doing. Example:

jQuery(document).ready(function(){
  // add your code here using "jQuery" instead of "$"
});

The Slider component is part of jQuery UI:
hidden link
If you have not included the required files for the jQuery UI library, you need to do so. They will not be loaded by default.

Next take a look at this comment:
https://toolset.com/forums/topic/parametric-search-numeric-slider-for-price-range/#post-105656
You need to create an element in your filter controls that will be used as a placeholder for the slider. jQuery will do the magic inside this element:

<div id="price-slider"></div>

Then modify this code to target your text search input fields correctly (I believe you mentioned that you had already done this):

jQuery(document).ready(function(){
jQuery("#price-slider").slider({
    range: true,
    min: 0,
    max: 1000000,
    step: 10000,
    values: [0, 1000000],
    slide: function(event, ui) {
        jQuery('#wpv_control_textfield_min-price').val(formatNumber(ui.values[0]));
        jQuery('#wpv_control_textfield_max-price').val(formatNumber(ui.values[1]));
}});
jQuery('#wpv_control_textfield_min-price, #wpv_control_textfield_max-price').change(function() {
    jQuery('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_min-price').val()), parseInt($('#wpv_control_textfield_max-price').val())]);
});
});

didn't do nothing
Is that because there are errors, or because your code isn't executing, or because of bugs in your code? Check the browser console for errors. If there are errors, debug them. If there are no errors, and it seems like nothing is happening, it's probably because your filter selectors are wrong, or your code isn't executing for another reason. Add debuggers or console log statements to pinpoint the problem. Let me know where you get stuck.

[Ido Angel]

thx chris 🙂

i have included the required files for the jQuery UI library, of course 🙂

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

i've changed the code a bit. here's the filter:

<div class="search">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<h2>[wpml-string context="wpv-views"]Category[/wpml-string]</h2>
	[wpv-control-post-taxonomy taxonomy="things-category" type="checkboxes" url_param="wpv-things-category"]
</div>
<div class="form-group">
    <div id="price-slider"></div>
  	[wpv-control-postmeta field="wpcf-thing-price" type="textfield" url_param="wpv-wpcf-thing-price_min"]
	[wpv-control-postmeta field="wpcf-thing-price" type="textfield" url_param="wpv-wpcf-thing-price_max"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]
</div>

and jquery:

jQuery(document).ready(function(){
jQuery("#price-slider").slider({
    range: true,
    min: 0,
    max: 10000,
    step: 100,
    values: [0, 10000],
    slide: function(event, ui) {
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min').val(formatNumber(ui.values[0]));
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_max').val(formatNumber(ui.values[1]));
}});
jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min, #wpv_control_textfield_wpv-wpcf-thing-price_max').change(function() {
    jQuery('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_min').val()), parseInt($('#wpv_control_textfield_wpv-wpcf-thing-price_max').val())]);
});
});

i'm still not getting it to work. look here:

hidden link

when i'm touching the slider page gets many errors, as attached in screenshot.

if you can help - great. if i'm out of the scope, ok too, i'll find a way 🙂
cheers,
ido

[Ido Angel]

hey,
update:

error is gone after adding this code to the js:

var formatNumber = function(number)
{
    number += "";
    var parts = number.split('.');
    var integer = parts[0];
    var decimal = parts.length > 1 ? '.' + parts[1] : '';
    var regex = /(\d+)(\d{3})/;
    while (regex.test(integer))
    {
        integer = integer.replace(regex, '$1' + ',' + '$2');
    }
    return integer + decimal;
};

the slider runs. i'm even getting results - but not ajax, i have to change to url for it to work. only thing now is the numbers do not appear on the slider - but they do change (in their textboxes) according to the search.
any help in getting them to appear on the slider itself? thanks!

[Christian Cox]

Okay great, you made some progress here I can see. If you want to programmatically trigger an AJAX update of a search form based on some other event (like a slider change complete event), you can trigger a generic "change" event on any search field with the class "js-wpv-filter-trigger" inside that form. Example:

jQuery(".js-wpv-filter-form-10 .js-wpv-filter-trigger").first().trigger("change");

Docs for the trigger function:
hidden link

Any change event on a js-wpv-filter-trigger search field will trigger an AJAX update.

only thing now is the numbers do not appear on the slider - but they do change (in their textboxes) according to the search.
I'm not clear what you mean here, is this something you were able to resolve? It seems like the numbers are updating as expected when I click Submit. If this isn't working with AJAX, let me know and I can take another look.

[Ido Angel]

Thank C,
I tried inserting your line - didn't work. Ajax seems to just not work with this form, maybe because the "between" filter is based on url-parameter. am i right?
and about the "numbers on the slider" - i mean something more like this:

hidden link

but nevermind, you've been a great help - i guess i just need another jquery plugin 🙂

[Ido Angel]

Hey from the past 🙂

I'm trying this with a new slider and a bit lost with the jquery.

Slider is this one:

hidden link

I have no clue how to get the min-max cf values to affect the slider, like we did last time.

here's the html:

<link rel="stylesheet" href="<em><u>hidden link</u></em>">
    <script src="<em><u>hidden link</u></em>"></script>
<div class="search">
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<h2>[wpml-string context="wpv-views"]Category[/wpml-string]</h2>
	[wpv-control-post-taxonomy taxonomy="things-category" type="checkboxes" url_param="wpv-things-category"]
</div>
<h2>[wpml-string context="wpv-views"]Price[/wpml-string]</h2>
<input type="text" id="sampleSlider" />

<div class="form-group pricebox">
    [wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_min" placeholder="Choose Min"]
  </div>
<div class="form-group pricebox" style="margin-right: 0 !important;">  
	[wpv-control-postmeta field="wpcf-thing-price" url_param="wpv-wpcf-thing-price_max" placeholder="Choose Max"]
  </div>
  [wpv-filter-submit output="bootstrap"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

Here's the JS:

var mySlider = new rSlider({
        target: '#sampleSlider',
        values: [100, 200, 300, 400, 500],
        range: true,
        tooltip: false,
        scale: true,
        labels: true,
        set: [100, 500]
    });

any idea?

many many thanks!

Ido