How to make jQuery UI Slider smoother when the step is 0.25

Question

I know that we can change the step in short distance between min and max and Math round the UI value to create smooth sliding like

step: .0001, 
 ...
$(".value").text("slider value: " + Math.round(ui.value)); 

but this is OK when the step is 1. How about this case which is 0.25. How can I make the slider smoother?

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
    min:-12,
    max:6,
    step:0.25,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.value.toFixed(2) );
      }
    });
  } );

 body{
  padding:60px;
  }

#slider 
{
    width: 80%;
    margin-left: 1em;
}
 #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider">
 <div id="custom-handle" class="ui-slider-handle"></div>
</div>

Answer 1

Based on your code and description, you'd like the slider to actually step a smaller amount, such as .0001, yet show in steps of .25. For example if the current value was -1.00, and the user moved the slider leftward, the actual value would reduce by .0001 each step, and the shown value should retain -1.25. Since we're working with .25, it may be best to step at .05. You'll see why later.

Basically, we need a better Math function or our own Rounding method. Something that fits this

+-------------+
| x    | r(x) |
+-------------+
| 1.00 | 1.00 |
| 1.05 | 1.00 |
~~~~~~~~~~~~~~~~
| 1.20 | 1.00 |
| 1.25 | 1.25 |
| 1.30 | 1.25 |
+-------------+

$(function() {
  var handle = $("#custom-handle");

  function rounding(l) {
    if (l == 0) {
      return 0.001;
    }
    var neg = false;
    var result = false;
    if (l < 0) {
      l = Math.abs(l);
      neg = true;
    }
    var i = Math.floor(l);
    var d = l - i;
    if (d % .25 == 0) {
      result = i + d;
    }
    if (neg) {
      result = 0 - result;
    }
    return result;
  }

  $("#slider").slider({
    min: -12,
    max: 6,
    step: 0.05,
    create: function() {
      handle.text($(this).slider("value"));
    },
    slide: function(event, ui) {
      $(".raw").html(ui.value);
      var v = rounding(ui.value);
      $(".format").html(v);
      if (v) {
        handle.text(v.toFixed(2));
      }
    }
  });
});

body {
  padding: 60px;
}

#slider {
  width: 80%;
  margin-left: 1em;
}

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>
<div class="raw"></div>
<div class="format"></div>

To examine just the decimal, we can break our Long 1.25 into an Integer (i) would be 1 and Decimal (d) would be .25. We can then use Modulo d % .25, this will return just the remainder. E.G.: .26 % .25 = .01

This will work in most all cases except for 0, 0 % .25 = 0 is true, but if we then return 0, logically it will be read as false. So we just return a slightly more than zero value so it's read as a Long and then .toFixed() handles the rest.

If the User yanks the handle, it may skip the needed value and land in a position that would not update the handle. This happens even more so when the value step is .01 or .001. Either the value gets skipped to allow for faster action or something can't keep up.

Hope that helps.