Js Ui Slider / Change To Value (- Precent)

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() {

Solution 1:

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);
    }
  });
}); 

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><p><inputtype="text"id="year"readonlystyle="border:0; color:#f6931f; font-weight:bold;"><inputtype="text"id="amount"readonlystyle="border:0; color:#f6931f; font-weight:bold;"></p><divid="slider-range-min"></div>

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.