我有一个 JQuery UI slider ，通过将其向前移动，它会显示格式化的货币，其中 RS 作为卢比符号。如图所示
给出了JQuery代码
$('#personalLoanSlider').slider({
range: "min",
value: 1,
step: 25000,
min: 200000,
max: 4000000,
slide: function( event, ui ) {
$('#personalloanAMT').val(formatINR("Rs. " + ui.value ));
$('#wordAmount').html(convertNumberToWords( ui.value) + "Rupees Only");
}
});
我想要一个功能，如果用户直接在文本框中输入自己的自定义值，则 slider 将向前或向后移动。
我尝试过下面的代码，但它不起作用
$("#personalloanAMT").change(function () {
var value = this.value.substring(1);
console.log(value);
$('#wordAmount').html(convertNumberToWords( ui.value) + "Rupees Only");
});
最佳答案
您可以在输入字段上使用 input 事件，将输入值转换为正确的数字并更新 slider 的值。
jQuery(document).ready(function($){
var $personalLoanSlider = $('#personalLoanSlider').slider({
range: "min",
value: 1,
step: 25000,
min: 200000,
max: 4000000,
slide: function( event, ui ) {
$('#personalloanAMT').val(formatINR("Rs. " + ui.value ));
}
});
function formatINR(unit){
return unit + "₹";
}
$(document).on('input', '#personalloanAMT', function(e) {
var value = e.target.value;
var validSliderValue = Number(value.replace(/\D+/g, ''));
$personalLoanSlider.slider( "option", "value", validSliderValue );
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="personalLoanSlider"></div>
<br/>
<input id="personalloanAMT" type="text" >
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>您可以在此处阅读有关 jQuery 输入事件的更多信息 jQuery 'input' event
这是上面代码片段的 jsbin https://jsbin.com/hupozeb/edit?html,js,output
关于javascript - 来自输入文本更改的光滑 JQuery UI slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46778307/