jQuery UI Price Slider with Default Values and Handle Popups

To set the default starting and ending values of the price slider to 0 and 2000 respectively, you can update the 'values' property in the initialization code like this:

$(function() {
    $( '#slider-range' ).slider({
      range: true,
      min: 0,
      max: 2000, // Updated max value to 2000
      values: [ 0, 2000 ], // Updated values to [0, 2000]
      slide: function( event, ui ) {
        $( '#amount' ).html( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ] );
        $( '#min' ).val(ui.values[ 0 ]);
        $( '#max' ).val(ui.values[ 1 ]);
      }
    });
    $( '#amount' ).html( '$' + $( '#slider-range' ).slider( 'values', 0 ) +
     ' - $' + $( '#slider-range' ).slider( 'values', 1 ) );
});

To add input fields and popups on the slider handles, you can modify the HTML structure and add some CSS and JavaScript code. Here's an example implementation:

HTML:

<div id='slider-container'>
  <div id='slider-range'></div>
  <input type='text' id='min' value='0' />
  <input type='text' id='max' value='2000' />
</div>

CSS:

#slider-container {
  position: relative;
}

#slider-container .ui-slider-handle::before {
  content: attr(data-value);
  position: absolute;
  top: -25px;
  left: -10px;
  width: 40px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #333;
  padding: 5px;
  border-radius: 5px;
}

JavaScript:

$(function() {
    $( '#slider-range' ).slider({
      range: true,
      min: 0,
      max: 2000,
      values: [ 0, 2000 ],
      slide: function( event, ui ) {
        $( '#amount' ).html( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ] );
        $( '#min' ).val(ui.values[ 0 ]);
        $( '#max' ).val(ui.values[ 1 ]);
        $(ui.handle).attr('data-value', ui.value); // Update handle popup value
      }
    });
    
    $( '#amount' ).html( '$' + $( '#slider-range' ).slider( 'values', 0 ) +
     ' - $' + $( '#slider-range' ).slider( 'values', 1 ) );
     
    // Initialize handle popups with default values
    $('#slider-range .ui-slider-handle').each(function() {
      $(this).attr('data-value', $(this).slider('value'));
    });
});

This code will add input fields for the minimum and maximum values, and also add popups on the slider handles that display the current slider value.