如何用JS提交两个滑块值并在0-24小时进度条高亮区间？

问题根源 #

滑块值出现在URL里、控制台报错一闪而过，核心原因是表单默认触发了提交行为，导致页面刷新——你的JS代码刚执行就被页面刷新打断，所以值无法留存，报错也来不及查看。

完整实现代码 #

以下是可直接运行的完整示例，包含表单阻止提交、滑块值获取、进度条区间高亮的功能：

HTML

<form id="timeRangeForm">
  <label>开始时间: <span id="startValue">0</span> 时</label>
  <input type="range" id="startSlider" min="0" max="24" value="0">
  
  <label>结束时间: <span id="endValue">24</span> 时</label>
  <input type="range" id="endSlider" min="0" max="24" value="24">
  
  <!-- 24小时进度条容器 -->
  <div class="progress-container">
    <div class="progress-bg"></div>
    <div class="progress-highlight" id="highlight"></div>
  </div>
</form>

CSS

.progress-container {
  width: 100%;
  height: 20px;
  background: #eee;
  margin-top: 20px;
  position: relative;
  border-radius: 10px;
}

.progress-bg {
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 10px;
}

.progress-highlight {
  position: absolute;
  top: 0;
  height: 100%;
  background: #4CAF50;
  border-radius: 10px;
  transition: all 0.2s ease;
}

JavaScript

// 获取DOM元素
const form = document.getElementById('timeRangeForm');
const startSlider = document.getElementById('startSlider');
const endSlider = document.getElementById('endSlider');
const startValueEl = document.getElementById('startValue');
const endValueEl = document.getElementById('endValue');
const highlightEl = document.getElementById('highlight');

// 阻止表单默认提交行为
form.addEventListener('submit', (e) => {
  e.preventDefault();
});

// 更新进度条和显示值的函数
function updateProgress() {
  // 获取滑块数值（转为数字类型）
  const startVal = Number(startSlider.value);
  const endVal = Number(endSlider.value);
  
  // 确保开始值不大于结束值
  const minVal = Math.min(startVal, endVal);
  const maxVal = Math.max(startVal, endVal);
  
  // 更新页面显示的数值
  startValueEl.textContent = startVal;
  endValueEl.textContent = endVal;
  
  // 计算高亮区间的位置和宽度（基于24小时的百分比）
  const leftPercent = (minVal / 24) * 100;
  const widthPercent = ((maxVal - minVal) / 24) * 100;
  
  // 设置高亮样式
  highlightEl.style.left = `${leftPercent}%`;
  highlightEl.style.width = `${widthPercent}%`;
  
  // 控制台打印值（方便调试）
  console.log(`开始时间: ${startVal}, 结束时间: ${endVal}`);
}

// 页面加载时初始化一次
updateProgress();

// 滑块拖动时实时更新
startSlider.addEventListener('input', updateProgress);
endSlider.addEventListener('input', updateProgress);

关键问题解决点 #

1. 阻止表单提交：通过e.preventDefault()阻止表单默认跳转，避免页面刷新，确保JS代码能持续运行。
2. 正确获取滑块值：直接通过元素的.value属性获取，注意转为数字类型避免字符串拼接问题。
3. 查看控制台报错：按F12打开浏览器控制台，勾选「Preserve log」（保留日志）选项，这样页面刷新后报错信息不会消失，方便排查问题。

新手建议 #

• 调试时优先用console.log()打印变量，确认值是否正确获取。
• 学习表单事件和DOM操作基础，可参考MDN的HTML表单、JavaScript DOM相关文档。
• 遇到页面刷新类问题，先检查是否有表单提交、a标签跳转等默认行为未被阻止。

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