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

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Attachments
Slider _ jQuery UI_files.zip
Zip showing the files used so far
(405.53 KiB) Downloaded 196 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Did you mean something like this? http://jsfiddle.net/2XNjq/22/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Great - only that it's lost that inner shading now... not vital, but nice when it's there.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

If you're capturing the values on submission, you can insert them back into the input fields when the page reloads.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

If I remove them, the slider doesn't change the values in the fields tho.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Well what sorts of errors are you seeing? It's clearly working on JSFiddle
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

No errors. The Slider "nodules" are not showing. I've no idea why. As it's the same code as yours.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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. :)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply