jQuery使用change事件无法实现原生JS的range滑块与数字输入框同步效果

问题修正方案 #

你现有代码存在2个核心错误，调整后即可实现效果：

• 赋值逻辑颠倒：你需要将滑块#inputRange的取值同步给数字输入框#aSolicitar，原有代码写反了两个元素的位置
• jQuery val() 方法用法错误：jQuery中给元素赋值需将值作为val()的入参传入，不能使用$().val() = xxx的原生属性赋值写法

基础版（和原生JS效果一致，松开滑块时触发同步）

$("#inputRange").change(function(){
    $("#aSolicitar").val($(this).val());
});

优化版（拖动滑块过程中实时同步）

如果需要拖动时就同步更新数值，将change事件替换为input事件即可：

$("#inputRange").on('input', function(){
    $("#aSolicitar").val($(this).val());
});

可选拓展：双向同步

如果需要修改数字输入框时也同步更新滑块位置，可以追加以下代码：

$("#aSolicitar").on('input', function(){
    $("#inputRange").val($(this).val());
});

内容的提问来源于stack exchange，提问作者user16754567