jQuery Slider with Focus Event: Real-time Range Selection

Here's an example of how to create a jQuery slide range with an event firing when the slider is in focus:

First, include the jQuery library in your HTML file:

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>

Then, create the HTML structure for the slider:

<div id='slider-range'></div>
<input type='text' id='slider-value' readonly>

Next, initialize the slider using jQuery UI:

$(function() {
  $('#slider-range').slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function(event, ui) {
      $('#slider-value').val('$' + ui.values[0] + ' - $' + ui.values[1]);
    }
  });
  $('#slider-range').on('focus', function() {
    console.log('Slider is in focus');
  });
});

In this code, we initialize the slider with a range of 0 to 500 and default values of 75 and 300. We also set up a slide event that updates the text input with the current slider values.

Finally, we attach a focus event to the slider, which logs a message to the console when the slider is in focus.

Note that you may need to include the jQuery UI library to use the slider widget.