老实说，我不会使用JavaScript。我在应用程序中使用了stock rails range_field。您可以在此处查看：
距离场
下面是我的应用程序中范围字段的示例代码片段：

<%= range_field :thing1, :in => 0..100, :step => '.1' %>

这是一个很好的小滑块，在iOS和Web上运行良好，在Android上看起来也不错。

此代码段将允许您在滑块更改时更新标签的值（如果您希望在页面加载时显示它，则可以将.change更改为.ready）。
形式

#form.html.erb
<%= form_for Foobar.new do |f| %>
  <%= f.label :some_size, "Current Value = " %>
  <%= f.range_field :some_size, :in => 0..100, :step => 1 %>
<% end %>

然后是jQuery

#form.js
$("#new_foobar").change(function() { 
  $form = $(this);
  $input_value = $form.children("#foobar_some_size").val();
  $label = $form.children("#foobar_some_size").siblings("label");
  $label.text("Current Value = " + $input_value);
})

这是在Rails 7.0中，使用bootstrap 5.0，但足够简单。使用onInput代替onChange，并带有滑块。

= form.range_field :score, min: 0, max: 100, class: "form-range", onInput: 'setScore(this.value)'
#scoreVal

然后是JavaScript：

:javascript
  const setScore = (val) => {
    document.querySelector('#scoreVal').innerText = val;
  }