时间戳

首页 > 解决方案 > 当 Step 为 0.25 时如何使 jQuery UI Slider 更平滑

javascript - 当 Step 为 0.25 时如何使 jQuery UI Slider 更平滑

问题描述

我知道我们可以改变min和max和Math roundUI 值之间的短距离来创建平滑的滑动

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>

标签： javascriptjquery-uijquery-ui-slider

解决方案

根据您的代码和描述，您希望滑块实际步进较小的量，例如 0.0001，但以 0.25 的步长显示。例如，如果当前值为-1.00，并且用户向左移动滑块，则实际值将每步减少 0.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>

为了只检查小数，我们可以将 Long1.25分解为 Integer ( i)1和 Decimal ( d) .25。然后我们可以使用 Modulo d % .25，这将只返回余数。例如：.26 % .25 = .01

这在大多数情况下都有效，除了0,0 % .25 = 0是真的，但如果我们然后返回0，逻辑上它将被读取为false。所以我们只返回一个略大于零的值，因此它被读取为 Long，然后.toFixed()处理其余部分。

如果用户拉动手柄，它可能会跳过所需的值并落在不会更新手柄的位置。.01当值步为或时，这种情况更是如此.001。要么跳过该值以允许更快的操作，要么某些内容无法跟上。

希望有帮助。

推荐阅读