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 ) {

          if( ui.value >= 10) {
              $( this ).slider( "option", "step", 3 );
          }
          else {
              $( this ).slider( "option", "step", 1 );  
          }
          $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });