JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
  <label for="amount">Minimum number of bedrooms:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>

<button id="rem">-</button>
<button id="add">+</button>

JavaScript

$(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 10,
      value: 2,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    
    
    $("#rem").on('click', function() {
      var val = $("#slider-range-max").slider("value");
      $("#slider-range-max").slider( "value", val-1 );
      $( "#amount" ).val($("#slider-range-max").slider("value"));
    });
    
    $("#add").on('click', function() {
      var val = $("#slider-range-max").slider("value");
      $("#slider-range-max").slider( "value", val+1 );
      $( "#amount" ).val($("#slider-range-max").slider("value"));
    });

  });