JS UI Slider /更改为值（ - precent） [英] JS UI Slider / change to value (- precent)

问题描述

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

我已经改变了值为当前年份， max 为2218年，添加了步骤选项仅按整数递增，添加年 div以显示年份，并更改金额 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.

这篇关于JS UI Slider /更改为值（ - precent）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！