JS UI Slider/更改为值(- precent)

2022-01-24 00:00:00 slider jquery javascript jquery-ui-slider

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

I use JS UI Slider to make something like timeline. I want, when the year value increase with 1 - my output value to reduce with 0,662%. Some ideas? How I can do it?

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

推荐答案

我想你想要类似下面的东西:

I think you want something like the following:

$(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 的年份差原始数量的动物.

I've changed the value to be the current year, max to be year 2218, added the step option to increment only by whole numbers, added a year div to display the year, and changed the amount div output to be the difference in years times 0.00662 deducted from the original amount of animals.

相关文章