All geek questions in one place

How to call the "change input" function depends on the value of the text field using javascript

I use a range slider with a text box, so whenever I move a range, the value becomes updated in the text box. Also, when I change the value in the text box, the slider will move accordingly.

Using javascript, I also change the bottom color of the slider to orange. This works fine when I move the range manually, but I encounter a problem when moving the slider, it depends on updating the value of the text field manually. The slider moves, but the color of the bottom is not updated. I think this is because the change function with a range does not start. Could you tell me how I can start it with updating a text field?

My code is:

</head> </head> <body> <input type="range" min="1" max="100" step=".1" value="15"id="myrange" class="myrange"> <input type="text" id="priceText"></input> </body>

JavaScript:

 $(function() { var style = $("<style>", {type:"text/css"}).appendTo("head"); $('#priceText').val($(myrange).val()); $('input[type="range"]').on('input change', function() { var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min')); $('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head'); $('#priceText').val($(this).val()); }); }); $('#priceText').keyup(function(e){ var val = $(this).val().replace(/\D/g,''); // check only for digits $('#myrange').val(val); });

Fiddle: https://fiddle.jshell.net/anoopcr/o07tu661/3/

+5
source share
3 answers

You just need to trigger the change event on the range slider in the keyup event

So,

 $('#myrange').val(val);

It would be:

 $('#myrange').val(val).trigger("change");

Then it will be updated correctly.

Here is a working example:

 $(function() { var style = $("<style>", {type:"text/css"}).appendTo("head"); $('#priceText').val($(myrange).val()); $('input[type="range"]').on('input change', function() { var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min')); $('<style type="text/css"></style>').text('input[type="range"]::-webkit-slider-runnable-track { background-image:-webkit-gradient(linear, left top, right top, color-stop('+val+', orange), color-stop('+val+', #C5C5C5));}').appendTo('head'); $('#priceText').val($(this).val()); }); }); $('#priceText').keyup(function(e){ var val = $(this).val().replace(/\D/g,''); // check only for digits $('#myrange').val(val).trigger("change"); }); 
 input[type="range"] { width: 100%; height: 28px; -webkit-appearance: none; outline: none; border: 0; /*for firefox on android*/ padding: 0 8px; /*for IE*/ margin: 8px 0; } /*chrome and opera*/ input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; transition: 0.3s; background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, orange), color-stop(0.15, #C5C5C5) ); } .myrange::-webkit-slider-runnable-track { background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, orange), color-stop(0.15, #C5C5C5) ); height: 8px; /*trackHeight*/ border-radius: 4px; /*trackHeight*/ transition: 0.3s; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background: orange; width: 28px; height: 28px; border-radius: 50%; margin-top: -12px; cursor: pointer; transition: 0.3s; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="1" max="100" step=".1" value="15"id="myrange" class="myrange"> <input type="text" id="priceText"></input>
+3
source

You can fire the change event after editing the value of your text field:

  var val = $(this).val().replace(/\D/g,''); // check only for digits $('#myrange').val(val); $('#myrange').change();
0
source

Use . trigger () to manually trigger a change event on #myrange

 $('#priceText').keyup(function(e){ var val = $(this).val().replace(/\D/g,''); // check only for digits $('#myrange').val(val); $('#myrange').trigger('change'); });

https://fiddle.jshell.net/o07tu661/8/

0
source

Source: https://habr.com/ru/post/1275732/

More articles:


All Articles