Question

I’m using jQuery UI Slider in my rails application.

So, Am trying to store the value of a jQuery UI Slider in my database when a form is submitted.

My code is as follows :

  <div>
    <p>
      <%= f.label(:amount, 'Amount') %>
      <div id="slider"></div>
      <%= f.text_field(:amount, :maxlength => 3, :size => 2) %>
    </p>
  </div>

The following jquery for the slider:

  $(function() {
    $("#slider").slider({
      range: "max",
      min: 0,
      max: 10,
      value: 0,
      slide: function(event, ui) {
        $("#amount").val(ui.value);
      }
    });
    $("#amount").val($("#slider").slider("value"));
  }); 

All the above code is working fine. But when i edit my page again the slider min value is shown (i.e. 0) instead of the value from the database. So how do i achieve it?

Answer 1

I think that the problem is that you are setting the value to 0 when you initiallize the slider. Try this code instead, I haven’t tried it, but the point is that unless you want your slidder always set to 0 when it gets loaded, you will have to change the parameter value of the initializer.

$(function() {
    $("#slider").slider({
      range: "max",
      min: 0,
      max: 10,
      value: $("#amount").val(),
      slide: function(event, ui) {
        $("#amount").val(ui.value);
      }
    });
    $("#amount").val($("#slider").slider("value"));
  });