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:

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

Post by simonmlewis »

Im trying to see how to make it touch-draggable so it can be used on a phone/ipad.

http://stackoverflow.com/questions/6360 ... ch-devices
This seems to help, but doesn't really help me to know if it will work with me, or how to implement it onto mine.
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 »

This comment seems to answer the 'how':
I included the library just after jquery-ui library and before the script calling the .slider() function. No further row of code had to be written.
Whether or not it will work for your implementation, you'll have to test and let us know.
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

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	
	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

	<script>
	$(function() {
	$('#widget').draggable();
	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: 1,
  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>
This prevents the sliders from moving altogether.
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 have found that I needed to download the js file, so here it is at the moment:
the slider works, but as I say, you cannot slide them on an iphone.

Code: Select all

	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="/js/priceslider/jquery.ui.touch-punch.min.js"></script>

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	<script>
	$('#widget').draggable();
	</script>

	<script>
	$(function() {
	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];
$('#widget').draggable();
$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 1,
  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>
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 »

What is #widget?
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 »

That confused me too actually. I assume it tied in generically with the rest of the slider.
If I make it the same as the function #slider, it doesn't work.
But ALL the reports on this addition use that word.
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 »

simonmlewis wrote:it doesn't work.
You'll have to elaborate on this. Also, do you have something with markup and scripting we can look at? Very hard to debug a black box.
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 »

Well all the attachment that was in the ZIP is the same.

This is the content of the third file (jquery.ui.touch-punch.min.js):

Code: Select all

/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

This is the script from the top:

Code: Select all

	<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="/js/priceslider/jquery.ui.touch-punch.min.js"></script>

	<link rel="stylesheet" href="/js/priceslider/jquery-ui.css">
	<script src="/js/priceslider/jquery-1.js"></script>
	<script src="/js/priceslider/jquery-ui.js"></script>
	<script>
	$('#widget').draggable();
	</script>

	<script>
	$(function() {
	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];
$('#widget').draggable();
$("#slider").slider({
  value: 100,
  min: 1,
  max: 300,
  values: values,
  step: 1,
  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>
And this is the "form".

Code: Select all

<div class='thumbnailstop_pagenum'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='hidden' name='search' value='$search'>
  <div class='search-price'>Min: 
  &pound;<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
  if (isset($pricemin)) { echo " value='$pricemin'";}
  echo ">
  </div>

  <div class='search-price'>Max: 
  &pound;<input type='text' id='pricemax' name='pricemax'  class='slidepricefield' ";
  if (isset($pricemax)) { echo " value='$pricemax'";}
  echo ">
  </div>

  <div class='search-submit'>  
  <input type='submit' value='Update' class='slidesubmit'>
  </form>
  </div>  
  
  <div class='search-slider'><div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider' style='width: 290px'></div>
  </div>
  <div style='clear: both' /></div>
</div></div>
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 »

error.jpg
error.jpg (35.42 KiB) Viewed 2900 times
Good news. This works on PC and Mobile, but when it loads, it has errors where the numbers should be.

Code: Select all

    <link href="/js/searchslider/jquery.css" rel="stylesheet">
    <link href="/js/searchslider/jquery-ui-1.css" rel="stylesheet">
    <script src="/js/searchslider/ga.js" async="" type="text/javascript"></script><script src="/js/searchslider/jquery_002.js"></script>
    <script src="/js/searchslider/jquery-ui.js"></script>
    <script src="/js/searchslider/jquery.js"></script>

	<script>
	$(function() {
	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-range" ).slider({
            range: true,
            min: 1,
            max: 300,
            values: values,
            step: 1,
            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 class='thumbnailstop_pagenum'>
<div>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search2'>
<input type='hidden' name='search' value='$search'>
  <div class='search-price'>Min: 
  &pound;<input type='text' id='pricemin' name='pricemin' class='slidepricefield' ";
  if (isset($pricemin)) { echo " value='$pricemin'";}
  echo ">
  </div>

  <div class='search-price'>Max: 
  &pound;<input type='text' id='pricemax' name='pricemax'  class='slidepricefield' ";
  if (isset($pricemax)) { echo " value='$pricemax'";}
  echo ">
  </div>

  <div class='search-submit'>  
  <input type='submit' value='Update' class='slidesubmit'>
  </form>
  </div>  
  
  <div class='search-slider'>      <div class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all' id='slider-range'><div class='ui-slider-range ui-widget-header ui-corner-all'></div><a style='left: 26%;' class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a><a style='left: 51.8%;' class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a></div></div>
  </div>
  <div style='clear: both' /></div>
</div>
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 »

Code: Select all

$("#pricemin").val("" + $("#slider").slider("values", 0));
$("#pricemax").val("" + $("#slider").slider("values", 1));
Where is #slider?
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 »

Ahh don't worry, I have totally and utterly cracked it.
I noticed the errors, fixed them, and even got it to be responsive too.

The only bit in the CSS I cannot suss (and was there before), is the middle colouring that moves with it. Tho that's not vital.

IT works on a phone really nicely.
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 »

Code: Select all

if(isset($_GET['pricemin']))
{
    $pricemin = $_GET['pricemin'];
    $_SESSION['pricemin']=$pricemin;
} elseif (isset($_SESSION['pricemin'])) {
    $pricemin=$_SESSION['pricemin'];
}


if(isset($_GET['pricemax']))
{
    $pricemax = $_GET['pricemax'];
    $_SESSION['pricemax']=$pricemax;
} elseif (isset($_SESSION['pricemax'])) {
    $pricemax=$_SESSION['pricemax'];
}
This is now causing me an issue, strangely.

If the person is on a category page and changing the values, it's great. I can make it work with page numbers as well.

But if I then go to a different category page, it holds that value, and then it shows nothing is available.... as that price range may not be in that other category. IE. Going from £100 shirts... to keyrings?!

So I need it to identify - I think - if the $categories value is now different, or if the page itself is different too.
I suppose I can create different variables for the different page to avoid it (catpricemin, subcatpricemin, searchpricemin...), but not for different categories.
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 »

This may have flaws, but this is working.
Can you see a way I can tidy this up??

It checks what is posted.
It then asks if that is the same as what is in $c.
But if the page has only just opened, $c will be empty, or will have a valued from the previous page (which is set below the code).

Code: Select all

// first check that the catid is same or new

// if new catid
$catnew= isset($_GET['c']) ? $_GET['c'] : null;
$c = $_SESSION['c'];

  if ($c <> $catnew)
    {
    $pricemin = 0;
    $pricemax = 500;
    }
  else
  {
if(isset($_GET['pricemin']))
{
    $pricemin = $_GET['pricemin'];
    $_SESSION['pricemin']=$pricemin;
} elseif (isset($_SESSION['pricemin'])) {
    $pricemin=$_SESSION['pricemin'];
}


if(isset($_GET['pricemax']))
{
    $pricemax = $_GET['pricemax'];
    $_SESSION['pricemax']=$pricemax;
} elseif (isset($_SESSION['pricemax'])) {
    $pricemax=$_SESSION['pricemax'];
}
    
}
  
if(isset($_GET['c']))
{
    $c = $_GET['c'];
    $_SESSION['c']=$c;
} elseif (isset($_SESSION['c'])) {
    $c=$_SESSION['c'];
}
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 going to store min/max prices in session data, presumably for someone navigating away from and then back to a given category, why not use a multidimensional array? Rather than having to juggle $_SESSION['pricemax'] you could have something like $_SESSION['shirts']['pricemax'], $_SESSION['cardigans']['pricemax'], $_SESSION['shoes']['pricemax'] and so forth. Would probably make more sense to use the category IDs, but I wanted the example to be descriptive.
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 »

Good idea, but we have so many categories, it wouldn't be possible I don't think, to manage it.
This method I have come up with, works on the subcategories, because that uses a different page, and I Can make it ask for the Subid rather than the Catid.

Just wondered if there was a way that uses less code.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply