?
Solved

JQUERY: Percentage Slider, get value

Posted on 2009-12-21
14
Medium Priority
?
1,924 Views
Last Modified: 2013-11-19
Hi All,


Very new to JQUERY.

I'm looking to setupa JQUERY slider, that allows the browsers to slide between 0 - 100%.

+i need help on accessing the chosen value.


All help welcome
0
Comment
Question by:detox1978
  • 8
  • 6
14 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101518
here it is

$("#yourslider").slider("value")
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101523
how do i set the slider?
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101529
where yourslider should be something like this

<div id="yourslider"></div>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 61

Expert Comment

by:HainKurt
ID: 26101533
try this

$("#yourslider").slider("value", 255);
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101537
check demos here : http://jqueryui.com/demos/slider/
click view source, you will get what you are looking for + more ;)
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101571
any points on how i set up a slider to allow user to slide between 0 - 100, and how i get the value?

0
 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 26101598
check here to use slider on your page

http://jqueryui.com/demos/slider/
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101605
yeah, i've been using that.

I have a slider with a min/max level set and can access the value.


How do get the value to display on the page?
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101632
26101518 shows how to get the slider value...
26101533 shows how to set the value...

I dont get what are you trying to do?
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101634
here's the code i have so far.

Ideally i'd want to give the end user feedback on the percentage they have chosen.

Not sure how to get the change function to work
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Slider - Default functionality</title>
	<link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.slider.js"></script>
	<link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" />
	<style type="text/css">
		#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script type="text/javascript">
	$(function() {
		$("#slider").slider();
		$('#slider').slider({ min: 0 });
		$('#slider').slider({ max: 100 });
		$('#slider').slider({
		   change: function(event, ui) {
				document.getElementById('percentage').innerHTML = $('#slider').slider('option', 'value');
			   }
		});
	});
	
	function phil() {
		var value = $('#slider').slider('option', 'value');
		alert(value)
	}
	</script>
</head>
<body>
 
 
<div id="slider" style="width:100px;"></div>
<div id="percentage">100%</div>
<a href="#" onClick="phil();">get value</a>
 
</body>
</html>

Open in new window

0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101639
try this

        function phil() {
                var value = $("#slider").slider("value");
                alert(value)
        }
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 26101644
and

document.getElementById('percentage').innerHTML = $('#slider').slider('option', 'value');
-->
document.getElementById('percentage').innerHTML = $("#slider").slider("value");
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101647
Thanks for the tip.

i realised i never read the article properly, and needd to bind the function;

$('#slider').bind('slidechange', function(event, ui) {
      document.getElementById('percentage').innerHTML = $('#slider').slider('option', 'value');
});
0
 
LVL 2

Author Comment

by:detox1978
ID: 26101659
I'm very new to JQUERY.


Is there an better way to write the initial function?


$(function() {
      $("#slider").slider();
      $('#slider').slider({ min: 0 });
      $('#slider').slider({ max: 100 });
      $('#slider').bind('slidechange', function(event, ui) {
            document.getElementById('percentage').innerHTML = $('#slider').slider('option', 'value');
      });
});
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question