Search code examples
javascriptjqueryhtmljquery-ui-slider

jquery slider not initializing values

I am getting the [object object] instead of the initial value in the jquery slider. I have read a few posts on SO, and have placed the script right before the closing tags, but the slider is still not initializing.
JS FIDDLE

$("#slider").slider({
  value: 5,
  min: 25,
  max: 150,
  step: 5,
  slide: function(event, ui) {
    $("#fee-amount").val("$" + ui.value);
  }
});

$("#fee-amount").val("$" + $("#slider").slider("value"));
<form id="payment-fee">
  <div class="form-group">
    <label for="fee-amount">Load Amount:</label>
    <input type="text" id="fee-amount" value="" />
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 pull-left text-left">
      <span>$25</span>
    </div>
    <div class="col-xs-6 col-sm-6 pull-right text-right">
      <span>$150</span>
    </div>
  </div>

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

here is a screenshot as well. How can I initialize the slider? Thanks.

enter image description here

Solution

  • Use the following

    $( "#fee-amount" ).val( "$" + $( "#slider" ).slider( "value" ) )

    Here is working jsFiddle

    See http://api.jqueryui.com/slider/#method-value