Question

我知道我们可以在min与max和Math round UI值之间的短距离内更改步长，以创建平滑的滑动效果

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

但是当步骤为1时可以。 0.25这种情况怎么样？能不能让我知道如何使滑块更光滑

$( 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

根据您的代码和描述，您希望滑块实际步进较小的数量，例如.0001，但以.25的步长显示。例如，如果当前值为-1.00，并且用户向左移动滑块，则实际值将每步减少.0001，显示的值应保留-1.25。由于我们正在使用.25，因此最好踏上.05。稍后您会看到原因。

基本上，我们需要一个更好的数学函数或我们自己的舍入方法。合适的东西

+-------------+
| 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>

要仅检查十进制，我们可以将Long 1.25分解为整数（i将为1，而十进制（d）将为{{1 }}。然后我们可以使用Modulo .25，这将只返回余数。例如：d % .25

这在除.26 % .25 = .01之外的大多数所有情况下都有效，0为true，但是如果我们随后返回0 % .25 = 0，则在逻辑上将其读为0。因此，我们只返回略大于零的值，以便将其读取为Long，然后false处理其余的值。

如果用户拉动手柄，则它可能会跳过所需的值并降落到不会更新手柄的位置。当值步长为.toFixed()或.01时，这种情况会更加严重。要么跳过该值以允许更快地执行操作，要么无法跟上。

希望有帮助。

当步长为0.25时如何使jQuery UI Slider更加平滑

1 个答案: