How to set slider value dynamically?

Question

JavaScript

There is a code

$( "#slider-range-max" ).slider({<br>
      range: "max",<br>
      min: 1,<br>
<br>
      max:61,<br>
 <br>
      value: 1,<br>
      step: 1,<br>
      slide: function( event, ui ) {<br>
          <br>
        var val = ui.value;<br>
         <br>
        if(val > 10){<br>
           <br>
         ui.value = ui.value + 3;<br>
          <br>
<br>
          $( "#amount" ).val(ui.value);<br>
         <br>
          <br>
           <br>
      //   $(this).slider('option','max',500);<br>
       <br>
         <br>
    }<br>
     else {  $( "#amount" ).val( ui.value); <br>
    }

The output to the text field is 9, 10, 13, 14, 15. CHADNT?

And if you replace ui.value = ui.value + 3; on ui.value = ui.value * ui.value; the output is 9, 121, 144, 169, 196…

Answer 1

Then

          var valueShow;
          if(ui.value>10){
              valueShow=10 + (ui.value-10)*3 ;
          }else{
              valueShow=ui.value;
          }
          $( "#amount" ).val(valueShow);

Answer 2

need output like 9, 10, 13, 16, 19, 22

Answer 3

$(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" ) );
  });

jsfiddle.net/Mrfun/3/