JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">

<a id="clickme">Test me</a>



<p class="filter-label">Height: <span id="height-value"></span></p>
<div id="height-slider-range" class="slide-filter"></div>

JavaScript

$("#clickme").click(function() {
        var minValue = 10;
      var maxValue = 20;
      
       $("#slider-range").slider('values',0,50);+
         $("#height-slider-range").slider('values', 0, minValue);
      $("#height-slider-range").slider('values', 1, maxValue);
	});
  


$("#height-slider-range").slider({
  range: true,
  min: 0,
  max: 100,
  values: [ 0, 100 ],
  slide: function( event, ui ) {
    $( "#height-value" ).text(ui.values[ 0 ] + '"' +  ' - ' + ui.values[ 1 ]  + '"');
    var min_height = ui.values[ 0 ]
    var max_height = ui.values[ 1 ]

  }
});

$( "#height-value" ).text($( "#height-slider-range" ).slider( "values", 0 ) + '" - ' + $( "#height-slider-range" ).slider( "values", 1 ) + '" & more');