i want jquery slide range with show value of each unit for example we have 1 to 5 i want to show numbers 12345 under every range

Here's an example code snippet that should achieve what you're looking for:

$(function() {
  // Initialize the slider
  $("#slider-range").slider({
    range: true,
    min: 1,
    max: 5,
    values: [1, 5],
    slide: function(event, ui) {
      // Update the value labels
      for (var i = 1; i <= 5; i++) {
        $("#value-" + i).text(i);
      }
      $("#value-" + ui.values[0]).text(ui.values[0]);
      $("#value-" + ui.values[1]).text(ui.values[1]);
    }
  });

  // Add the value labels
  for (var i = 1; i <= 5; i++) {
    $("#slider-range").append("<div id='value-" + i + "' class='slider-value'>" + i + "</div>");
  }
});

#slider-range {
  width: 50%;
  margin: 0 auto;
}

.slider-value {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 0px 2px #000;
}

.slider-value:first-child {
  left: -10px;
}

.slider-value:last-child {
  right: -10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="slider-range"></div>

Here's a breakdown of what the code does:

1. Initialize the slider with the range of values (1 to 5) and set the initial values to [1, 5].
2. Add a slide event listener to the slider that updates the labels for each value whenever the slider is moved.
3. Add the value labels to the slider using jQuery's append function.
4. Style the value labels to position them below the slider and give them a circular shape. Note: I've added some CSS to style the slider and value labels, but you can customize this to fit your needs.