JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<body>
    <div id="slider-range-max"></div>
    <input type="text" id="amount" />
</body>

JavaScript

$(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 61,
      value: 1,
      slide: function( event, ui ) {
          var  valueShow ;
          if(ui.value>10){
              valueShow=ui.value - (ui.value % 3) +1 ;
          }else{
              valueShow=ui.value;
          }
          
          $( "#amount" ).val(valueShow);
      }
    });
    
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });