jQuery UI Slider: Ensure Data-Value Attribute for Handles on Load

To ensure that the '.ui-slider-handle' elements have a 'data-value' attribute even when the slider loads, you can modify the code as follows:

$(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
    },
    create: function(event, ui) { // Add create event callback
      $(this).find('.ui-slider-handle').each(function() {
        $(this).attr('data-value', $(this).slider('value')); // Set data-value attribute
      });
    }
  });
  
  $( '#amount' ).html( '$' + $( '#slider-range' ).slider( 'values', 0 ) +
   ' - $' + $( '#slider-range' ).slider( 'values', 1 ) );
});

By adding a create event callback to the slider initialization code, we can set the data-value attribute of each .ui-slider-handle element to its initial value. This ensures that the data-value attribute is always present, even when the slider loads.