Why do both handles on jQuery slider show minimum value?

I have a jQuery slider defined as follows:

    $('#price-slider').slider({
      min: 7,
      max: 16,
      animate: true,
      range: true,
      step: 10,
      values: [7, 16]
     });
    $('#price-slider').slider().slider('pips');

When it renders, there is only one handle, and the min/max values are both equal to the defined min value of 7.

Solution

Your slider doesn't move because you have min and max values 7, 16 and step is 10 ??

So you need to change step, say to 9 or change min, max values...

See working code:

<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
  
    $('#price-slider').slider({
      min: 7,
      max: 16,
      animate: true,
      range: true,
      step: 1,
      values: [7,16]
     });
    $('#price-slider').slider().slider('pips');
    
  } );
  </script>
</head>
<body>
 
<div id="price-slider"></div>
 
</body>
</html>