Menu
I am using a range slider with text box, so whenever I slide the range, value gets updated in textbox. Also whenever I change the value in textbox, slider will move accordingly.
Using javascript, I am also changing the slider lower color to orange.This is working perfectly when I slide the range manually but facing issue while moving slider depends upon manual textbox value update. slider is moving but, lower portion color is not updating. I think its because on change function with range is not triggering. Can you please let me know how can I trigger it with textbox update ?
My code :
</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/
634
You just need to trigger a change event on the range slider on the keyup event
So
$('#myrange').val(val);
Would become:
$('#myrange').val(val).trigger("change");
Then it would update correctly.
Here's 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
