i want jquery slide range with show value of each unit

Here is an example of a jQuery slider range with the value of each unit displayed:

HTML:

<div id="slider-range"></div>
<p>
  <label for="amount">Range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

JavaScript:

$( function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 100,
    values: [ 25, 75 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
    }
  });
  $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
    " - " + $( "#slider-range" ).slider( "values", 1 ) );
});

In this example, we create a slider range with a minimum value of 0 and a maximum value of 100. The initial values of the slider range are set to 25 and 75. The slide event is used to display the current values of the slider range in a text input field with the id amount. The readonly attribute is used to prevent the user from manually entering values into the text input field.

To style the slider range and text input field, you can use CSS. Here is an example:

#slider-range {
  width: 50%;
}
.ui-slider-range {
  background: #f6931f;
}
.ui-slider-handle {
  background: #fff;
  border: 2px solid #f6931f;
}
#amount {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

This will create a slider range with an orange background and white handles. The text input field will be displayed below the slider range and will have a font size of 16px and a bold font weight.