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

JQUERY: Percentage Slider, get value

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
detox1978
Asked:
detox1978
  • 8
  • 6
1 Solution
 
HainKurtSr. System AnalystCommented:
here it is

$("#yourslider").slider("value")
0
 
detox1978Author Commented:
how do i set the slider?
0
 
HainKurtSr. System AnalystCommented:
where yourslider should be something like this

<div id="yourslider"></div>
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
HainKurtSr. System AnalystCommented:
try this

$("#yourslider").slider("value", 255);
0
 
HainKurtSr. System AnalystCommented:
check demos here : http://jqueryui.com/demos/slider/
click view source, you will get what you are looking for + more ;)
0
 
detox1978Author Commented:
any points on how i set up a slider to allow user to slide between 0 - 100, and how i get the value?

0
 
HainKurtSr. System AnalystCommented:
check here to use slider on your page

http://jqueryui.com/demos/slider/
0
 
detox1978Author Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
detox1978Author Commented:
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
 
HainKurtSr. System AnalystCommented:
try this

        function phil() {
                var value = $("#slider").slider("value");
                alert(value)
        }
0
 
HainKurtSr. System AnalystCommented:
and

document.getElementById('percentage').innerHTML = $('#slider').slider('option', 'value');
-->
document.getElementById('percentage').innerHTML = $("#slider").slider("value");
0
 
detox1978Author Commented:
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
 
detox1978Author Commented:
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
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: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now