我正在使用带有文本框的范围滑块，因此每当我滑动范围时，值都会在文本框中更新。每当我更改文本框中的值时，滑块也会相应移动。
使用javascript，我也将滑块较低的颜色更改为橙色。当我手动滑动范围但面临问题时，移动滑块取决于手动文本框值更新，这非常有效。滑块正在移动，但下部颜色未更新。我认为这是因为改变功能与范围不触发。你能告诉我如何通过文本框更新触发它吗？
我的代码：
</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);
});
您只需要在change事件的范围滑块上触发keyup事件
所以
$('#myrange').val(val);
会成为：
$('#myrange').val(val).trigger("change");
然后它会正确更新。
这是一个有效的例子：
$(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>您可以在编辑文本框值后触发change事件：
var val = $(this).val().replace(/\D/g,''); // check only for digits
$('#myrange').val(val);
$('#myrange').change();
使用.trigger()事件在#myrange上手动触发更改事件
$('#priceText').keyup(function(e){
var val = $(this).val().replace(/\D/g,''); // check only for digits
$('#myrange').val(val);
$('#myrange').trigger('change');
});