如何在HTML中放置th:field以绑定滑块薪资值至表单？

直接把th:field="*{salaryMin}"和th:field="*{salaryMax}"绑定到滑块对应的<input type="range">元素上即可，不需要用隐藏输入框，具体操作如下：

1. 绑定滑块输入控件
   找到代码里两个类型为range的滑块输入框，分别添加对应的th:field属性：

<!-- 最小薪资滑块 -->
<input type="range" id="min-slider" min="0" max="100000" th:field="*{salaryMin}">
<!-- 最大薪资滑块 -->
<input type="range" id="max-slider" min="0" max="100000" th:field="*{salaryMax}">

只要你的表单标签通过th:object绑定了后端表单对象，Thymeleaf会自动填充滑块的初始值，表单提交时也会自动把滑块当前值提交到对应属性。

2. 同步显示数值（可选）
   如果需要页面实时显示滑块数值，确保JS里的滑块事件能更新显示元素内容，同时可以用Thymeleaf初始化显示值：

<span id="min-value" th:text="${yourFormObject.salaryMin}">20000</span>
<span id="max-value" th:text="${yourFormObject.salaryMax}">80000</span>

注意把yourFormObject替换成你实际绑定的表单对象名称。

3. 隐藏输入框无效的原因
   之前用隐藏输入框没生效，大概率是没在滑块值变化时，把滑块的实时值同步到隐藏输入框的value属性里。相比这种需要额外同步的方式，直接绑定滑块本身更简洁可靠，省去了额外的JS同步逻辑。

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