How to set value from start, jquery ui slider?

JavaScript
1

hi,

Anyone know how I can set the value attribute to “5” and display it as “5 days” on load.

If I inspect the element and drag and release the handle I will see the value attribute updated with the correct number. However when I load the page and inspect before dragging, there is no value attribute, and it seems like the default value won’t be submitted if the attribute is not set.

html

<form action="step.php" method="post">
					<div class="slider-wrapper">
						<div class="slider" id="slider3"></div>
							<input name="amount" type="text" id="amount" class="amount" readonly>
						</div>
					<button type="submit">Ok!</button>
</form>

jquery

$(function() {
	$( "#slider" ).slider({
  		value: 5,
  		min: 1,
  		max: 30,
  		slide: function( event, ui ) {
   	 		$( "#amount" ).val( ui.value + ' days' );
 		},
		change: function( event, ui ) {
      		$( '#amount' ).attr('value', ui.value);
    	}
	});
});
2

The HTML you show doesn’t have an element with ID amount (you actually have it set to amount3). So you’ll need to change it from one to the other, probably:

$(function() {
	$( "#slider" ).slider({
	  value: 5,
	  min: 1,
	  max: 30,
	  slide: function( event, ui ) {
	    $( "#amount3" ).val( ui.value + ' days' );
	  }
	});
	$( "#amount3" ).val( $( "#slider" ).slider( "value" ) + ' days' );
});
3

Hi, sorry, was just a copy/paste mistake, it has the correct ID in the actual code. So the problem is still there=)

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.