<?php
include('config.php');
error_reporting(0);
if($_POST)
{
    mysql_real_escape_string($_POST['amount']);
    $values = str_replace(' ','',$_POST['amount']);
    $values = str_replace('$','',$values);
    $values = explode('-',$values);
     $min = $values[0];
    $max = $values[1];
    $res = mysql_query('select `serial`,`name`,`price` from products where `price` BETWEEN "'.$min.'" AND "'.$max.'"');
    $count  = mysql_num_rows($res);
    $HTML='';
    if($count > 0)
    {
        while($row=mysql_fetch_array($res))
        {
            $id         = $row['serial'];
            $product    = $row['name'];
            $price      = $row['price'];
            
            
            $HTML .= '<div>';
            $HTML .= 'Product ID: '.$id;
            $HTML .= '<br />Product Name: '.$product;
            $HTML .= '<br />Price: <strong>$'.$price.'</strong>';
            $HTML .= '</div><br /><hr />';
        }
    }
    else
    {
        $HTML='No Data Found';
    }
}
else
{
    $min = 30;
    $max = 900;
    $HTML='Search Products in range.';
}

?>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
    
    
    <script type="text/javascript" src="pricerange/jquery-1.8.0.min.js"></script> 
    <link rel="stylesheet" href="pricerange/css.css" />
    <script src="pricerange/jq.js"></script>
  </head>
  
<script type="text/javascript">
$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 1000,
      values: [ <?php echo $min; ?>, <?php echo $max; ?> ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "Rs." + $( "#slider-range" ).slider( "values", 0 ) +
      " - Rs." + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>
<body>
    
      

<form action="products1.php" method="post" id="products">
<div style="margin-left:20px;">
   
    <input type="text" id="amount" name="amount" style="border:0; width:200px; height:40px; color:#f6931f; margin-left:150px; font-weight:bold; margin-top:-20px;" readonly>

    <div id="slider-range"></div>
 
    
</div>
<input type="image" src="images/images.jpg" name="weight"  style="float:left; margin-left:400px; margin-top:10px; width:70px; height:30px;"/>

</form>
              
</body>
</html>