如何使用simple_form和bootstrap实现range滑块的当前值实时显示

Simple Form本身没有内置滑块值实时显示的能力，你可以通过少量前端代码扩展实现，步骤如下： #

步骤1：调整输入代码，添加标识和值展示容器 #

修改你的表单输入代码，给滑块添加自定义类用于JS识别，同时新增用于展示当前值的元素：

<%# 给滑块添加自定义class，同时新增值显示区域 %>
<%= f.input :data, as: :range, prompt: "my data", collection: 0..45, 
  input_html: { class: "range-slider-track", data: { value_target: "data-range-display" } } %>
<%# 可以直接放在hint位置，也可以放在页面任意你需要展示值的位置 %>
<%= f.hint "当前选中值：<span id='data-range-display'>0</span>".html_safe %>

步骤2：添加JS逻辑实现实时更新 #

在页面对应的JS文件中添加以下监听逻辑，原生JS实现无额外依赖：

document.addEventListener('DOMContentLoaded', () => {
  // 批量处理所有滑块，兼容多滑块场景
  document.querySelectorAll('.range-slider-track').forEach(slider => {
    const displayEl = document.getElementById(slider.dataset.valueTarget);
    if (!displayEl) return;
    // 初始化显示默认值
    displayEl.textContent = slider.value;
    // 监听滑块拖动事件实时更新
    slider.addEventListener('input', () => {
      displayEl.textContent = slider.value;
    });
  });
});

可选优化：自定义Simple Form Wrapper复用逻辑 #

如果项目中多处需要用到滑块值展示功能，可以在config/initializers/simple_form.rb中自定义专属wrapper，后续使用时不需要每次手动写值展示容器：

# 在simple_form初始化文件中添加自定义wrapper
config.wrappers :range_with_value, tag: 'div', class: 'form-group', error_class: 'form-group-invalid' do |b|
  b.use :html5
  b.use :label
  b.use :input, class: 'range-slider-track', data: { value_target: ->(input) { "#{input.attribute_name}-range-display" } }
  b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' } do |input|
    "当前选中值：<span id='#{input.attribute_name}-range-display'>0</span>".html_safe
  end
  b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
end

后续使用时直接指定wrapper即可：

<%= f.input :data, as: :range, prompt: "my data", collection: 0..45, wrapper: :range_with_value %>

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