Facing multiple Issues while trying to implement JQUERY UI range slider

Question

I've to create a slider which has 2 circles, one is set to 25%(draggable) and another one is set to 100%(static). While drag once it gets 100% left circle should completely overlap to right(static) circle. Both circles need to bound in slider boundaries, shouldn't to beyond.

Initially I tried it with simple drag and drop including some px to % calculations(as I need %) but I was stucked in calc. Then I find it to solve with Jquery range slider. Here I'm facing issues while slider height and width = 300px.

1. it gets out of slider boundaries
2. while dragging it seems not as smooth, even it is dragging if click outside of slider-handle.

here is my code -

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

.wrap{
          margin:5% 20% 0% 15%;
        }
        
      .ui-slider .ui-slider-handle{
            top: -150px;
            width:300px; 
            height:300px; 
            background-color:transparent; 
            position:absolute;
            border-style:none; 
            border:1px solid black;
            border-radius: 50%;
        }

 
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </p>
        <div id="slider-range" class="slider"></div>
    </div>

Answer 1

This seems to work as expected when you include the proper Stylesheet.

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

  $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
});

.wrap {
  margin: 5% 20% 0% 15%;
}

.ui-slider .ui-slider-handle {
  top: -150px;
  width: 300px;
  height: 300px;
  background-color: transparent;
  position: absolute;
  border-style: none;
  border: 1px solid black;
  border-radius: 50%;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

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

I added a start callback to prevent the max handle from being moved. See More: https://api.jqueryui.com/slider/#event-start