使用带有php数组的javascript滑块

I'm attempting to make a range slider that will work with php. I have part of the code up but can't get the range slider to update the number. From what I can see is it is somewhere in the onchange event. I posted the sections of the code that need attention. But this is basically one big if else statement and javascript at the end. Why I did it this way I really don't know. I'm in a bit of a time crunch though. So a solution would be awesome.

       // View all products
       else {
// Display site links
echo "<p>
    <a href='./index.php'>SweetShop</a></p>";

echo "<h3>Our Products</h3>";
 echo "<form name='form1' method='post' action=''>
    <p>
        <input id='slider' type='range' min='.50' max='2.00' step='.50' value='2.00' onchange='printValue('slider','rangeValue')' />
        <input style='text-align: center' id='rangeValue' type='text' size='2' />
        </p>
    </form>";
echo "<table align='center' border='2px solid' style='width:500px;' cellspacing='0'>";
echo "<tr>
    <th style='border-bottom:1px solid #000000;'>Name</th>
    <th style='border-bottom:1px solid #000000;'>Price</th>
    <th style='border-bottom:1px solid #000000;'>Category</th>
</tr>";


// Loop to display all products
foreach($products as $id => $product) {
    echo "<tr>
        <td style='border-bottom:1px solid #000000;'><a href='./index.php?view_product=$id'>" . $product['name'] . "</a></td>
        <td style='border-bottom:1px solid #000000;'>$" . $product['price'] . "</td> 
        <td style='border-bottom:1px solid #000000;'>" . $product['category'] . "</td>

    </tr>";
}
echo "</table>";
}

    echo $footer;

?>

<script>
  function printValue(sliderID, textbox){
    var x= document.getElementById(textbox);
    var y= document.getElementById(sliderID);

    x.value = y.value;
  }

   window.onload = function () {
      printValue('slider', 'rangeValue')
   }
 </script>

Not sure if this counts as a solution, but I'd take a look at your onchange code:

onchange='printValue('slider','rangeValue')'

The quotation marks inside the 'onchange' attribute are not escaped. I'd suggest changing this to:

onchange="printValue('slider','rangeValue')"

Not being able to test your code, I don't know if that will fix the problem, but it should move things forwards at least!

You need to change onchange in your slider input to

onchange='printValue()'

You need to change window onload to this

 window.onload = function () {
  printValue() 
 }

You need to change your function to this

  function printValue(){
var x= document.getElementById('rangeValue');
var y= document.getElementById('slider');

x.value = y.value; 
}

There is no need to pass any parameters to your function since you are allready using getElementById to get the values and set the values. Just use the id for each element