我正在使用带有文本框的范围滑块,因此每当我滑动范围时,值都会在文本框中更新.每当我更改文本框中的值时,滑块也会相应移动.
使用javascript,我也将滑块下部颜色更改为橙色.当我手动滑动范围但面临问题时,移动滑块取决于手动文本框值更新,这是完美的.滑块正在移动,但下部颜色未更新.我认为这是因为改变功能与范围不触发.
你能告诉我如何通过文本框更新触发它吗？
我的代码：
使用Javascript：
$(function() {
var style = $("最佳答案
您只需要在keyup事件的范围滑块上触发更改事件
所以
$('#myrange').val(val);
会成为：
$('#myrange').val(val).trigger("change");
然后它会正确更新.
这是一个有效的例子：
$(function() {
var style = $("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,color-stop(0.15,#C5C5C5)
);
}
.myrange::-webkit-slider-runnable-track {
background-image: -webkit-gradient(
linear,#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;
}