我希望滑块值的分割出现在文本div中。并且将在移动滑块时进行更新。该代码基于ion.rangeslider。
<div id="quantify">
<input type="text" id="rangequantify" value="" name="range" />
</div>
<br/><br/>
<div id="months">
<input type="text" id="rangemonths" value="" name="range" />
</div>
<br/><br/>
<div id="totalFinan">
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>
<script>
var $quantify, $months, $minImp, $maxImp, $fromImp, $frommonth, $month;
$quantify = 6000;
$months = 3;
$minImp = 0;
$maxImp = 5000;
$fromImp = 400;
$frommonth = 24;
$month = [6, 12, 24, 36, 48, 60];
jQuery(document).ready(function() {
jQuery("#rangequantify").ionRangeSlider({
hide_min_max: true,
keyboard: true,
value:$quantify,
min: $minImp,
max: $maxImp,
from: $fromImp,
step: 100,
prefix: "€",
prettify_separator: ".",
grid: true,
grid_num: 5
});
jQuery("#rangemonths").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: $months,
postfix: " months",
values:$month,
grid: true,
});
update();
});
function update(slider,val) {
var $quantify = slider == 1?val:$("#quantify").val();
var $months = slider == 2?val:$("#months").val();
$total = "€ " + ($quantify / $month[$months]).toFixed(2).replace(/\./g,',');
$( "#quantify" ).val($quantify);
$( "#totalFinan" ).val($months);
$( "#total-label" ).text($total);
console.log($total);
}