Stopbyte

Print a Slider Output

Web Development Javascript
, ,
#1

I want to have the slider I have already coded, and then make it print the output. For example, if you slide the slider to 45, it will print 45. This is what I have -

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page">
  <div data-role="header">
    <h1>Choose a Slider Output</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <label for="percentage">Percentage:</label>
      <input type="range" name="percentage" id="percentage" value="50" min="1" max="100">
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

<script>
var sliderValue;
$(function () {
   $("#percentage").on("slidestop", function () {
     sliderValue =  $(this).val();
   })
   $("#percentage").on("change", function () {
     sliderValue =  $(this).val();
   })
});

<document.getElementById("print2").innerHTML = sliderValue>

</script>

</body>
</html>

Although, it doesn’t print anything. Please help me by telling me what’s wrong. Thank You!

3 Likes
#2

Alright first things first, This is what I see when rendering your HTML code:

It looks fine, But the Javascript code has quite lots of Syntax errors such as:

<document.getElementById("print2").innerHTML = sliderValue>

Why the extra < > symbols? And where is the "print2" element?!

2 Likes
#3

Hi @Nathan_Chan :slight_smile: As @sam explained, You have many syntax errors, undefined elements and logic mistakes.

Some Mistakes:

You are calling this method, on load to add couple handlers to the page which is good, but keep in mind two main things:

  1. The element #percentage is never defined because the script is executed before the window is constructed. and it’s a JQuery code!

  2. You are defining the sliderValue variable, within the event handlers but then setting the print2 value outside the event handlers which is not correct.

  3. print2 is never defined!

$(function () {
   $("#percentage").on("slidestop", function () {
     sliderValue =  $(this).val();
   })
   $("#percentage").on("change", function () {
     sliderValue =  $(this).val();
   })
});

This should be done inside the event handlers (of course after correcting the syntax and defining print2)

<document.getElementById("print2").innerHTML = sliderValue>

##Correct Solution:

First call your initialization code inside window.onload (to make sure all elements are defined):
This is the event handler when the slider value changes…

Second define your print2 element, for this example I created a little label for that:

<label id="print2">50</label>

##Full Code:

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>Choose a Slider Output</h1>
			</div>
			<div data-role="main" class="ui-content">
				<form method="post" action="demoform.asp">
					<label for="percentage">Percentage:</label>
					<input type="range" name="percentage" id="percentage" value="50" min="1" max="100">
					<input type="submit" data-inline="true" value="Submit">
				</form>
				<br><hr>
				Print 2: <label id="print2">18</label>
			</div>
		</div>
		<script>
			window.onload = function () {
				var sliderValue;
				$("#percentage").on("slidestop", function () {
					sliderValue =  $(this).val();
					document.getElementById("print2").innerHTML = sliderValue;
				});
				$("#percentage").on("change", function () {
					sliderValue =  $(this).val();
					document.getElementById("print2").innerHTML = sliderValue;
				});
			};
		</script>
	</body>
</html>

Resulting Page:

Hope that helps @Nathan_Chan, And please make sure to mark this post as answer if it does answer your question otherwise you can freely discuss it in here and we will all be happy to assist as we can :slight_smile:

Best of luck.

2 Likes
#4

@Yassine Boom full answer :smiley: I was about writing a little answer for @Nathan_Chan here but then saw yours and I feel like you done all the work for us already :heart_eyes:

no wonder you’re the leader here, I’m really proud of you, and thanks for all the effort you are making to help everyone :slight_smile:

2 Likes