Question

我有一个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");
            }

        });

我想要一种功能，如果用户将自己的自定义值直接输入到文本框中，则滑块将向前或向后移动。

我尝试使用以下代码，但它无效

        $("#personalloanAMT").change(function () {
             var value = this.value.substring(1);
              console.log(value);
                $('#wordAmount').html(convertNumberToWords( ui.value) + "Rupees Only");
        });

Answer 1

您可以在输入字段中使用input事件，将输入值转换为正确的数字并更新滑块的值。

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

这是上面代码段https://jsbin.com/hupozeb/edit?html,js,output

的jsbin

Answer 2

你需要这样做，因为你想相应地移动滑块

$("#personalLoanSlider").slider("value", parseInt(value));

另外可以这样做

        $("#personalloanAMT").change(function () {
               var value = this.value.replace(/[^0123456789]/gi, '');
               var num = parseInt(value, 10);
                alert(value);
              $("#personalLoanSlider").slider("value", parseInt(num));
              $('#personalloanAMT').val(formatINR("Rs. "+num));
              $('#wordAmount').html(convertNumberToWords(num) + "Rupees Only");   

        });

从输入文本更改的Slick JQuery UI Slider

2 个答案: