Slick JQuery UI Slider from input text change

Question

I have a JQuery UI Slider and by moving it forward it's display formatted currency with RS as rupees symbol. As shown in the picture

The JQuery Code is given

$('#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");
            }

        });

I want a functionality that if the user input their own custom values directly in to textbox then the slider will move forward or backward.

I have tried with below code but its not working

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

$('#wordAmount').text(text). Does not work? A fiddle would help to solve the problem — , Oct 16 '17 at 20:14
#personalloanAMT is the text box, fiddle will take time because I have a convertNumberToWords js. #wordAmount is the div for converted Number To Words — Niharika Parida, Oct 16 '17 at 20:18
`change` vent will only work once for textbox , you have to use something else — Niladri, Oct 16 '17 at 20:21

score 1 · Accepted Answer · answered Oct 16 '17 at 21:11

You could use the input event on your input field, convert the input value to a proper number and update the slider's value.

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>

You can read more about the jQuery input event here jQuery 'input' event

here is a jsbin of the above code snippet https://jsbin.com/hupozeb/edit?html,js,output

Sashi · Answer 2 · 2017-10-16T21:16:25.870

0

You need to do like this, because you want to move the slider accordingly

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

Additionally can be done like this

        $("#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");   

        });

edited Oct 16 '17 at 21:16

answered Oct 16 '17 at 20:22

Sashi

686
8
21

Its working but I need to change text field auto formatted. – Niharika Parida Oct 16 '17 at 20:23

Slick JQuery UI Slider from input text change

2 Answers2