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.
Post a Comment for "Js Ui Slider / Change To Value (- Precent)"