CODEWITHSUNDEEP
javascriptjqueryrangeslider
acr
acr

Reputation: 1746

overwrite range slider values using javascript

I am using a range slider with text box, so whenever I slide the range, the value gets updated in the textbox. Also whenever I change the value in the textbox, the slider will move accordingly.

Here is the code I am using:

$('input[type="range"]').on('input change', function() {
  $('#LoanAmntText').val($(this).val());
});


$('#LoanAmntText').keyup(function(e) {
  var val = $(this).val().replace(/[^\d\+]/g, ""); // check only for digits
  $('#LoanAmntRange').val(val).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="20000000" step="100000" value="4000000" id="LoanAmntRange" class="LoanAmntRange">
<input type="text" id="LoanAmntText" />

The slider's min, max and step values are used in a way that it will cover most common values while using the range slider. But when I use the textbox to enter the value, I would like to use any number starting from 0( for ex:I need to enter 2450003).But with current code, it's not allowing me to do so.

What will be the best way to achieve this?

Fiddle:https://jsfiddle.net/anoopcr/cy14pu1L/11/

Upvotes: 0

Views: 325

Answers (1)

Ruud
Ruud

Reputation: 1372

Your keyup event will trigger after every key press. Since your slider has a step size of 100000 no one digit will able to comply with that. Either change your step size to 1 or use the change event instead.

Upvotes: 1

Related Questions