• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 848
  • Last Modified:

jquery range slider - get values

I am using this jquery range slider: http://jqueryui.com/demos/slider/#range

How to I get the each value and print to the page?

See my code attached.

i.e.

I would like to get the lower value of the slider and print to <div id="LowerValue"></div> and the higher value and print to <div id="HigherValue"></div>

<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 32,
			max: 126,
			values: [ 32, 126 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.values[ 0 ] + "$ - " + ui.values[ 1 ] + "$" );
			}
		});
		$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) + "$ - " + $( "#slider-range" ).slider( "values", 1 ) + "$" );
	});
</script>

Open in new window

0
petewinter
Asked:
petewinter
  • 3
  • 2
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
You need to change the function for the "slide" event. (And ofcause the initializing part at the bottom)
slide: function(event, ui) {
	$( "#LowerValue" ).val( ui.values[ 0 ] + "$" );
	$( "#HigherValue" ).val( ui.values[ 1 ] + "$" );
}

Open in new window

0
 
petewinterAuthor Commented:
Thanks, but it's not working for me. Can you please check my code?
<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 32,
			max: 126,
			values: [ 32, 126 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.values[ 0 ] + "$ - " + ui.values[ 1 ] + "$" );
				$( "#LowerValue" ).val( ui.values[ 0 ] + "$" );
				$( "#HigherValue" ).val( ui.values[ 1 ] + "$" );
			}
		});
		$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) + "$ - " + $( "#slider-range" ).slider( "values", 1 ) + "$" );
		$( "#LowerValue" ).val( $( "#slider-range" ).slider( "values", 0 ) + "$" );
		$( "#HigherValue" ).val( $( "#slider-range" ).slider( "values", 1 ) + "$" );
	});
</script>


<div class="demo" style="width:95%">

<p>
	<label for="amount">Printer Width:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->

<br /><br />

<div id="LowerValue"></div>
<div id="HigherValue"></div>

Open in new window

0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Sorry, I didn't notice the #LowerValue and #HigherValue elements were DIV tags. Please use html() instead of val()
slide: function(event, ui) {
        $( "#LowerValue" ).html( ui.values[ 0 ] + "$" );
        $( "#HigherValue" ).html( ui.values[ 1 ] + "$" );
}

Open in new window

0
 
petewinterAuthor Commented:
Perfect. Many thanks
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now