Page 1 of 3

Price Range Slider - how do I implement this into a query?

Posted: Thu Dec 10, 2015 4:01 am
by simonmlewis
https://jqueryui.com/resources/demos/slider/range.html
I am looking at adding something like this so that customers can change the price range of a search result.

1) how do I place the Lower and Higher amounts into variables?
2) how would I dynamically put that into a Submit button so it adds it to the search URL?

I don't want the page to changing immediately as the slider moves. I want them to move the slider, click "Update" and the products change. So I guess a simple GET form that posts the existing Search URL, but with PriceMax and PriceMin in the URL. But don't know how to do the above bits.

I can see how to do the CSS and $/£/€ etc.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 4:36 am
by simonmlewis
So I have found a good range slider, and been reading how to collate the value into a variable, but I cannot see it to collate the two values.

http://jsfiddle.net/2XNjq/
This puts it into one input, but I want both, so I can then run a search based on the Min / Max values.

I'm nearly there... but don't see how to get the two figures split into two variables.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 6:59 am
by Celauran
Did you mean something like this? http://jsfiddle.net/2XNjq/22/

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 7:19 am
by simonmlewis
Great - only that it's lost that inner shading now... not vital, but nice when it's there.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 7:37 am
by simonmlewis
Ok, I am doing ok, apart from that shading.
It would be very useful if I could "hold" the values of both fields and sliders, when the page turns over.
Is that possible? If I just change the value of the fields, it doesn't do anything.

Code: Select all

	<script>
	$(function() {
$("#slider").slider({
  value: 100,
  min: 0,
  max: 500,
  THIS >>>> values: [50, 450],
  step: 5,
  slide: function (event, ui) {
    $("#amount_min").val("" + ui.values[0]);
    $("#amount_max").val("" + ui.values[1]);
  }
});
$("#amount_min").val("" + $("#slider").slider("values", 0));
$("#amount_max").val("" + $("#slider").slider("values", 1));
	});
	</script>
I'm guessing it's "THIS >>>>" that needs to be altered, but I assume you cannot do that in PHP as this javascript.
So can you pop a Variable in there, and have it default to 50/450 if the variables are NIL.

How would I get a PHP Variable in there?

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 8:16 am
by Celauran
If you're capturing the values on submission, you can insert them back into the input fields when the page reloads.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 8:19 am
by Celauran

Code: Select all

$("#amount_min").val("" + $("#slider").slider("values", 0));
$("#amount_max").val("" + $("#slider").slider("values", 1));
This bit is what's setting the initial values. Remove this and populate the value attribute of the input fields via PHP instead.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 9:48 am
by simonmlewis

Code: Select all

<script>
	$(function() {
$("#slider").slider({
  value: 100,
  min: 0,
  max: 500,
  values: [50, 450],
  step: 5,
  slide: function (event, ui) {
    $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
  }
});
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
	});
	</script>

<div style='width: 200px'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='hidden' name='search' value='$search'>
  <label for='pricemin'>Minimum:</label>
  <input type='text' id='pricemin' name='pricemin'";
  if (isset($pricemin)) { echo "value='$pricemin'";}
  echo ">
  <label for='pricemax'>Maximum:</label>
  <input type='text' id='pricemax' name='pricemax'";
  if (isset($pricemax)) { echo "value='$pricemax'";}
  echo ">
  <input type='submit' value='Update'>
  </form>
</div>
<div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider'></div>
</div>

It doesn't work. Although it is posting, as the DB is drawing different results, it's not populating the field or adjusting the slider on load.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 9:50 am
by Celauran
I specifically said you needed to remove these lines

Code: Select all

$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
You're setting them in PHP and then overwriting them with JS.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 9:58 am
by simonmlewis
If I remove them, the slider doesn't change the values in the fields tho.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 10:06 am
by Celauran

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 10:19 am
by simonmlewis
I must be going so wrong here now.

Code: Select all

	<script>
	$(function() {
var amount_min = $("#amount_min");
var amount_max = $("#amount_max");
var mn = amount_min.val() ? parseInt(amount_min.val().replace('$', '')) : 50;
var mx = amount_max.val() ? parseInt(amount_max.val().replace('$', '')) : 450;
var values = [mn, mx];
$("#slider").slider({
  value: 100,
  min: 0,
  max: 500,
  values: values,
  step: 50,
  slide: function (event, ui) {
    $("#amount_min").val("$" + ui.values[0]);
    $("#amount_max").val("$" + ui.values[1]);
  }
});
	</script>
	
<div style='width: 200px'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='hidden' name='search' value='$search'>
 <label for='amount_min'>Minimum:</label>
  <input type='text' id='amount_min' value='$100'>
  <label for='amount_max'>Maximum:</label>
  <input type='text' id='amount_max' value='$400'>
  <input type='submit' value='Update'>
  </form>
</div>
<div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider'></div>
</div>
This is actually not producing the slider bits at all now.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 10:28 am
by Celauran
Well what sorts of errors are you seeing? It's clearly working on JSFiddle

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 10:33 am
by simonmlewis
No errors. The Slider "nodules" are not showing. I've no idea why. As it's the same code as yours.

Re: Price Range Slider - how do I implement this into a quer

Posted: Thu Dec 10, 2015 10:36 am
by simonmlewis
Not quite sure why, but this worked:

Code: Select all

	var pricemin = $("#pricemin");
var pricemax = $("#pricemax");
var mn = pricemin.val() ? parseInt(pricemin.val().replace('$', '')) : 50;
var mx = pricemax.val() ? parseInt(pricemax.val().replace('$', '')) : 450;
var values = [mn, mx];

$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 5,
  slide: function (event, ui) {
    $("#pricemin").val("" + ui.values[0]);
    $("#pricemax").val("" + ui.values[1]);
  }
});
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
	});
I had also changed amount_* to be pricemin/max.....

But it works now. :)