Range min and max not reflected

[RasmusFonseca]

Following is my full example based on the demo

<!DOCTYPE html>  
<html lang="en">  
  <head>  
	<meta charset="utf-8">  
	<title>Minimal example page</title>  

	<link rel="stylesheet" id="themeCSS" href="../css/classic.css"> 
	<link rel="stylesheet" href="style.css">
	
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
	
	<script src="../jQEditRangeSlider-withRuler-min.js"></script>
	

	
  </head>  
  <body>
  	<h1>Minimal example</h1>
        <div id="slider"></div>
        <script>
          $("#slider").rangeSlider({
            valueLabels: "change",
            range: {min: 30, max: 300},
            defaultValues: {min: 50, max: 60},
            step: 1,
            arrows: false,
            scales: [
              {
                first: function(val){ return val; },
                next: function(val){ return val + 10; },
                stop: function(val){ return false; },
                label: function(val){ return val; },
                format: function(tickContainer, tickStart, tickEnd){ 
                  tickContainer.addClass("myCustomClass");
                }
              }]
          });
        </script>


	</body>  
</html>  

I expect the slider to have ticks every 10 values, starting at 30 and ending at 300 and I expect the value that is shown above the handles to start at 50 and 60 respectively. Instead, the range is from 0 to 100 and the handles are positioned at 30 and 60. Am I doing something wrong or is this a bug/feature?

Thanks for a useful and well documented library.