我有一个range_field,允许用户在表单中选择0到100之间的值。我希望能够显示range_field的值,但我不知道如何做到这一点。我对Rails和JavaScript非常陌生,因此任何帮助都将不胜感激。谢谢
4szc88ey1#
老实说,我不会使用JavaScript。我在应用程序中使用了stock rails range_field。您可以在此处查看:距离场下面是我的应用程序中范围字段的示例代码片段:
<%= range_field :thing1, :in => 0..100, :step => '.1' %>
这是一个很好的小滑块,在iOS和Web上运行良好,在Android上看起来也不错。
6za6bjd02#
此代码段将允许您在滑块更改时更新标签的值(如果您希望在页面加载时显示它,则可以将.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); })
col17t5w3#
这是在Rails 7.0中,使用bootstrap 5.0,但足够简单。使用onInput代替onChange,并带有滑块。
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; }
3条答案
按热度按时间4szc88ey1#
老实说,我不会使用JavaScript。我在应用程序中使用了stock rails range_field。您可以在此处查看:
距离场
下面是我的应用程序中范围字段的示例代码片段:
这是一个很好的小滑块,在iOS和Web上运行良好,在Android上看起来也不错。
6za6bjd02#
此代码段将允许您在滑块更改时更新标签的值(如果您希望在页面加载时显示它,则可以将.change更改为.ready)。
形式
然后是jQuery
col17t5w3#
这是在Rails 7.0中,使用bootstrap 5.0,但足够简单。使用
onInput
代替onChange
,并带有滑块。然后是JavaScript: