代码之家 › 专栏 › 技术社区 › Med.Mass

JS UI滑块/更改为值(-上一步)

jquery-ui-slider slider jquery javascript

1

Med.Mass · 技术社区 · 7 年前

我使用JS UI滑块来创建类似时间线的东西。我想,当年产值增加1时,我的产值减少0662%。一些想法?我该怎么做?

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

1 回复 | 直到 7 年前

1

0

Phillip Thomas 7 年前

我认为您需要以下内容:

$(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 从动物的原始数量中扣除。