Price Range Slider - how do I implement this into a query?
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?
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.
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.
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
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.
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.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
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
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.
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
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.
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?
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>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.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
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
Code: Select all
$("#amount_min").val("" + $("#slider").slider("values", 0));
$("#amount_max").val("" + $("#slider").slider("values", 1));-
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
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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
I specifically said you needed to remove these lines
You're setting them in PHP and then overwriting them with JS.
Code: Select all
$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));-
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
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.
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
I must be going so wrong here now.
This is actually not producing the slider bits at all 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Price Range Slider - how do I implement this into a quer
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
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.
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
Not quite sure why, but this worked:
I had also changed amount_* to be pricemin/max.....
But it works now.
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));
});But it works now.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.