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

【问题标题】：JS UI Slider / change to value (- precent)JS UI 滑块/更改为值（- 百分比）
【发布时间】：2018-02-22 13:54:22
【问题描述】：

我使用 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>

【问题讨论】：

2,4 在您的 JS 中将导致语法错误：jsfiddle.net/028e54kk
@RoryMcCrossan 奇怪的是，它似乎在 SO sn-ps 中工作。我不知道为什么，但这是一个很好的练习。

标签： javascript jquery slider jquery-ui-slider

【解决方案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。

【讨论】：

不是真的，当你向右（不是向左）拖动时，输出会减少 0.0662% (- 0.662%)
现在示例 2018 - 输出 733131，但 2019 - 输出为 728 277.67 (-0.662%)
所以您希望 2018 年的输出为 733131？这如何等同于-0.662%？
你有从 2018 年到 2218 年（年）的时间线 - 2018 年的产量是 733131 只（动物），但 2019 年你有输出 728277,67 只动物（-0.662%）等等。每年我们损失了 0,662% 的动物
@Med.Mass 我现在明白了，希望这个解决方案更适合您的需求。