Rails - Jquery UI Slider - 显示滑块值

时间:2015-01-12 03:38:04

标签: ruby-on-rails jquery-ui slider

我在Ruby on Rails中使用Jquery UI Slider功能时遇到了一些困难。

我设法让滑块显示并为其指定了值。问题是,滑块的值没有显示。

的application.js

 $(function() {
   $( "#slider" ).slider({
     min: 400,
     max: 2400,
     value: 1500,
     animate: "slow",
     orientation: "horizontal",
     slide: function(event, ui) {
       $("#price").val(ui.value);
     }
   });
 });

index.html.erb

<%= form_tag Product.new do |f| %>

  <%= label_tag :price %>
  <%= hidden_field_tag :price %>

<% end %>

以下是此代码的HTML输出

<form accept-charset="UTF-8" action="/components" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="pfd9cKHWlEm/xdJmsegoc20CSFWLfQcbkbva27B/SgQ=" /></div>

<label for="price">Price</label>
<input id="price" name="price" type="hidden" />

</form><div id="slider"></div>

我使用此网站作为生成以下代码的指南

http://api.jqueryui.com/slider/

slide: function(event, ui) {
  $("#price").val(ui.value);
}

我知道所有鼠标移动都会触发slide事件。我输入了上面的代码,滑块的值仍然没有出现。

感谢任何帮助。感谢

1 个答案:

答案 0 :(得分:0)

由于输入字段类型为“隐藏”,因此未显示该值,请改为使用“文本”字段,

可以通过console.log()在开发者控制台中检查更新的值:

slide: function(event, ui) { console.log(ui.value); $("#price").val(ui.value); }

我希望有所帮助。