JS UI 滑块/更改值（- 百分比）

Question

我使用 JS UI Slider 来制作时间轴之类的东西。我想，当年值增加 1 - 我的产值减少 0,662%。一些想法？我该怎么做？

$(function() {
  $("#slider-range-min").slider({
    range: "min",
    value: 733131,
    min: 0,
    max: 10000000,
    slide: function(event, ui) {
      $("#amount").val(ui.value * (1 - 0.66 / 100));
    }
  });
});

<p>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>

Answer 1

我想你想要像下面这样的东西：

$(function() {
  var numAnimalsToday = 733131;
  $("#slider-range-min").slider({
    range: "min",
    value: 2018,
    min: 2018,
    max: 2218,
    step: 1,
    slide: function(event, ui) {
      var animalsLost = numAnimalsToday * ((ui.value - 2018) * 0.00662);

      $("#year").val(ui.value);
      $("#amount").val(numAnimalsToday - animalsLost);
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<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>
<p>
  <input type="text" id="year" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>

我已将 value 更改为当前年份，将 max 更改为 2218 年，添加了 step 选项以仅按整数递增，添加了 year div 显示年份，并将 amount div 输出更改为从原始动物数量中扣除的年数乘以 0.00662 的差值。

JS UI 滑块/更改值（- 百分比）

JS UI Slider / change to value (- precent)

javascript

jquery

slider

jquery-ui-slider