Jquery Slider value refuses to start at first value (code included)

[Failing_Solutions]

I'm trying to setup a range slider. However my initial value is always starting at 4.00 which is not the first value in the value map I setup. It increments correctly but is just starting at the wrong value.  I have included notes in the code part as to what I was trying to do.

 

I'm using PHP to get the values for the increments and it is looping through the correct values in the var MinvalMap

When I view the source I see the following values in the var:

var MinvalMap= [2.50,3.00,3.71,4.00,4.50,5.00,6.00,6.50,7.00,8.00,8.40,8.50,9.00,9.50,10.00,11.00,12.00,12.50,13.50,14.00,15.00,15.50,15.80,16.00,17.00,18.00,18.50,19.00,19.50,20.00,20.50,21.00,21.50,22.00,23.00,24.00,25.00,26.00,27.00,28.00,28.50,29.00,30.00,31.00,32.00,34.00,35.00,36.00,37.00,38.00,39.00,39.50,40.00,42.00,43.00,43.40,45.00,46.00,47.00,48.00,50.00,52.00,55.00,56.00,58.00,59.50,60.00,61.00,64.00,68.00,70.00,75.00,78.00,80.00,81.00,86.00,88.00,90.00,94.00,100.00,108.00,109.00,112.00,118.00,125.00,126.00,128.00,143.00,190.00,200.00,208.00,];

 

Which is correct but the min value is always starting at 4.00

 

So I'm thinking that this is not the correct way to reference the first value

min: MinvalMap[0],

 

Seems like it should be but .. I'm learning still..

 

Any help is appreciated.

 

 

 

The HTML part

 <p>Range Slider Here</p>
  <form>
  <fieldset>
    <legend>Connector 1</legend>
    <p>
      <label for="rangeAmount">Range</label>
      Min:<input type="text" id="rangeAmountMin" style="border:0; color:#f6931f; font-weight:bold;" onfocus="TheMin(this.value)"/> to 
      Max:<input type="text" id="rangeAmountMax" style="border:0; color:#f6931f; font-weight:bold;" onchange="TheMax(this.value)" />
    </p>
    <div id="slider-range"></div>

 

The Jquery Slider Range getting values from database...

 

<?php 
/// CON 1 Array
$Con1minquery=mysql_query("SELECT DISTINCT m_connector_1 FROM products where m_connector_1 IS NOT NULL ORDER BY m_connector_1 ASC");
while ($aquery=mysql_fetch_assoc($Con1minquery))
{
$newArray[]=$aquery['m_connector_1'];
asort($newArray);
}
?>
  <script type="text/javascript">
   jQuery("#jQueryUISlider").slider();
            //create a value array map    echo the sql array and add a comma to each value
		var MinvalMap= [<?php  foreach($newArray as $key => $val) {echo "$val,"; }?>];
			jQuery( "#slider-range" ).slider({
				range: true,
				//get the first value of the MinvalMap 
				min: MinvalMap[0],
				//get the last value of the MinvalMap
				max: MinvalMap.length -1,
				//setting the ranges to lowest to highest of the MinvalMap
				values: [MinvalMap[0], MinvalMap.length-1],
				slide: function( event, ui ) {
					$( "#rangeAmountMin" ).val(MinvalMap[ui.values[ 0 ]].toFixed(2));
					$( "#rangeAmountMax" ).val(MinvalMap[ui.values[ 1 ]].toFixed(2));
				}
			});
			jQuery( "#rangeAmountMin" ).val(MinvalMap[$( "#slider-range" ).slider( "values", 0 )].toFixed(2));
			jQuery( "#rangeAmountMax" ).val(MinvalMap[$( "#slider-range" ).slider( "values", 1 )].toFixed(2));

  </script>		

 

Attached is an image of how the page looks on Fresh (CRTL+F5) load.. always starts with min value 4.00

[Failing_Solutions]

Found the solution,

 

min: 0;

max: MinvalMap.length -1,

values [0, MinvalMap.length -1]

 

Was all I needed..