JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="slider-range"></div>
<div id="size-range"></div>
<div><input id="min_inches" /></div>
<div><input id="max_inches" /></div>
<div><input id="vote" type="button" value="Vote" /></div>

JavaScript

$(function() {

    $( "#slider-range" ).slider({
        range: true,
        min: 71,
        max: 109,
        values: [75, 100],
        slide: function( event, ui ) {
            $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
            $("#min_inches").val(ui.values[0]);
            $("#max_inches").val(ui.values[1]);


                }
    });
    $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
      $("#min_inches").val($("#slider-range").slider("values", 0));
      $("#max_inches").val($("#slider-range").slider("values", 1));
    
    $("#vote").on('click',function(){
        var a= $("#min_inches").val();
        var b=$("#max_inches").val();
        alert('This mimics your $.ajax code\r\n$_POST["a"]=>'+a+'\r\n$_POST["b"]=>'+b);
    /*
    $.ajax ({
     type: "POST",
     url: "searchrange.php",
     data: { a : a,
     b : b },
     success: function(option)
     {
    alert("voted");
     }
    });*/
        
    });

 });