如何实现range滑块输入参数仅在用户交互后才随GET请求提交

核心逻辑是利用表单提交规则：无name属性的input元素不会被携带到请求参数中，通过动态控制滑块的name属性实现需求，实现成本最低。

基础实现方案（原生JS） #

默认不给滑块设置name属性，仅当用户主动操作滑块后才追加对应name，未操作的滑块不会参与参数提交：

HTML代码 #

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input type="range" id="rangeMin" min="0" max="1" value="0" step="0.1">
  <label for="range-1b">Rangeslider:</label>
  <input type="range" id="rangeMax" min="0" max="1" value="1" step="0.1">
</div>

JS代码 #

// 最小值滑块事件绑定
document.getElementById('rangeMin').addEventListener('change', function() {
  this.setAttribute('name', 'absMin');
});
// 最大值滑块事件绑定
document.getElementById('rangeMax').addEventListener('change', function() {
  this.setAttribute('name', 'absMax');
});

优化方案（滑回默认值不提交） #

如果需要实现即使用户操作过滑块，但最终值和默认值一致时也不提交参数，可以加默认值判断：

const rangeMin = document.getElementById('rangeMin');
const rangeMax = document.getElementById('rangeMax');
// 存储初始默认值
const defaultMin = rangeMin.value;
const defaultMax = rangeMax.value;

rangeMin.addEventListener('change', function() {
  this.value !== defaultMin ? this.setAttribute('name', 'absMin') : this.removeAttribute('name');
});

rangeMax.addEventListener('change', function() {
  this.value !== defaultMax ? this.setAttribute('name', 'absMax') : this.removeAttribute('name');
});

jQuery Mobile适配方案 #

你代码中的data-role="rangeslider"是jQuery Mobile组件属性，该环境下推荐用slidestop事件代替原生change事件，避免滑动过程中重复触发：

// 绑定最小值滑块滑动结束事件
$(document).on('slidestop', '#rangeMin', function() {
  const defaultMin = $(this).data('default') || '0';
  $(this).val() !== defaultMin ? $(this).attr('name', 'absMin') : $(this).removeAttr('name');
});
// 绑定最大值滑块滑动结束事件
$(document).on('slidestop', '#rangeMax', function() {
  const defaultMax = $(this).data('default') || '1';
  $(this).val() !== defaultMax ? $(this).attr('name', 'absMax') : $(this).removeAttr('name');
});

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