How to get or set HTML5 Range Sliders value in JavaScript

 

 Getting and setting  HTML5 Range Sliders value in JavaScript

HTML5 Slider is an input tag  used to give the input with slide option whose position represents some value in a user specified range.

The value on the left side shows the minimum value and the right side shows the maximum value. The user can slide the bar from the right to left. All modern browser supports slider control. It is common finding this control in many websites.

In this blog we learn how to set or get HTML5 Range Slider's value in JavaScript.

Example 1:

Code Preview:

<!DOCTYPE html>
<html>
<head>
 
<title> Using Range Slider's  Javascript?</title>
 
<script>
 
function showValue(newValue)    
{
	document.getElementById("sliderValue").value =   newValue;  
}
</script>

</head>
<body>
	
 

<h2>Using Range Slider in Javascript</h2>

<b>  Setting  Range Slider value  </b>

<br>
Slider1:
<input id="slider1" name ="slider1" type="range" min="10" max="100" step="10" onChange="showValue(this.value);"/>
<input id="sliderValue" type="text" value=""/>
</body>
</html>

 Result:


 
codingzon-RangeSlider-in-Javascript-example1

 Example2

When button clicked javascript fires the function setSlider2Value()

setSlider2Value() function gets the slider value and converts that value to int using  parseInt, and 
assigns it to variable: slidervalue1. 
in Step 2 this slidervalue1 value again assigned in a textbox.

Code Preview:

<!DOCTYPE html>
<html>
<head>

<title> Using Range Slider's in Javascript</title>

<script>
	
	function setSlider2Value()    {
		
	slidervalue1 = parseInt(document.getElementById("slider2").value );  
		
	document.getElementById("slider2Value").value = slidervalue1; 
		
	}
</script>

</head>
<body>

<h2>Using Range Slider in Javascript</h2>

<b>Setting  Range Slider value on button Click</b>

<br>
JavaScript set value: <br>
Slider2:
<input id="slider2" name ="slider2" type="range" min="10" max="100" step="1"  value=""/>
<input id="slider2Value" type="text" value=""/>

<button onclick="setSlider2Value();">Click</button> 

<br />
</body>
</html>

 Result:

 

e-trainings-RangeSlider-in-Javascript-example2


Exmple3:

The<output> tag is  used to display the result of some calculation (performed by JavaScript) or the outcome of a user action (such as input data into a form element). The <output> tag is a newly added tag and was introduced in HTML5.  

In the below example, Range slider calls a method outputUpdate() for an attribute oninput. The oninput attribute fires when  slider value changed by user.

outputUpdate()  method captures the slider value and sets it to <output> tag.

 For more on 'oninput' refer here

Code Preview:

<!DOCTYPE html>
<html>
<head>

<title> Using Range Slider's Javascript?</title>

<script>
	
function outputUpdate(vol) {
	document.querySelector('#volume').value = vol;
}

</script>

</head>
<body>


<h2>Using Range Slider in JavaScript</h2>

<b>Setting  Range Slider value for HTML output element </b><br>
 
 	Slider3:
<input type="range" value="50" id="slider3" oninput="outputUpdate(value)">
<output  id="volume">50</output>

   
<br />
</body>
</html>

 Result:

codingzon-RangeSlider-in-Javascript-example3
 Example 4

When the user changes the slider value oninput attribute fires a JavaScript expression and applies the result to the output tag.

JavaScript's expression converts slider value and the number tag  inputs into int type using parseInt() and performs addition.

Preview:

<!DOCTYPE html>
<html>
<head>

<title> Using RangeSlider in JavaScript</title>

</head>
<body>


<h2>Using Range Slider in JavaScript</h2>

<b>Using RangeSlider, HTML output element and Textbox </b><br>
 
   
<input type="range" id="a" value="50" oninput="x.value=parseInt(value)+parseInt(b.value)">
+<input type="number" id="b" value="25">
=<output id="x"></output>
 
   
<br />
</body>
</html>

 Result:

 

codingzon-RangeSlider-in-Javascript-example4

Note: The output element is not supported in Edge 12 (or earlier).


Comments

Post a Comment

Popular posts from this blog

Recently viewed list in PHP Mysql

Image
 Recently viewed list in PHP MySQL        Learn How to show recently viewed products list in a PHP website using MySQL Database . In the previous tutorial, you learn how to get the last five product IDs in an array. In this tutorial, we use MySQL to get the details of each product from recently viewed, and display them in the bottom of the product details page. Here we're using two files, one is bookdetails.php and another is recentlyviewed.php. In Bookdetails.php bookid is added to a session array 'lastviewed' every time when user clicks on some book. bookdetails.php <?php @ session_start (); include "connect.php" ; //check if //A) a bookid has been submitted //B) the submitted value is numeric $auth = "" ; if ( isset ( $_GET [ 'bid' ])){ //clean it up if (! is_numeric ( $_GET [ 'bid' ])){ //Non numeric value entered. Someone tampered with the catid $error = true ; $errormsg = " Security, Serious error. Contact webmast...
Read more

Import CSV File Into MySQL Using PHP

Image
 Learn How to Import CSV File into MySQL Database Using PHP     This article shows you how to import an uploaded CSV file into MySQL using PHP. index.php file having a form code to upload a CSV file. Once the file uploaded successfully, PHP opens it and reads the line from CSV. Each line of data separated into php variables and then inserted into MySQL table. This process continues until the last line of the CSV. Once it is finished inserting, It displays a message – " Data Inserted in database" And finally closes CSV file. In case any error in uploading, it shows "the file type not allowed" message. PHP Version 5.5.11 1. Create a table with given code in a Database. Query: CREATE TABLE IF NOT EXISTS `items` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY ( `id` ) ) ;   2. Create a following file with you database details and include it in a index.ph...
Read more

Shoppingcart using PHP Sessions - Miniproject

Image
Shopping cart using PHP Sessions, MySQL In this tutorial, you are going to learn how to build a simple shopping cart project using PHP and MySQL. It is a basic project aimed for beginners . This project uses PHP Session to implement shopping cart. Within the session, a cart is created. Sessions allows you managing the products in the cart. Such as… adding product to the cart,  modifying the product quantity,  deleting the product finding the total number of products in the cart. etc.   Download source code from the given link: Note: Scan the code with antivirus and use it. Download Here are steps to accomplish the project. Just follow them. STEP-1   Create a project in a server. Create an image's folder inside the project folder. As given in the picture. Copy some sample products images in that. GO TOP↑   STEP-2: Start server. Open PhpMyAdmin tool in a browser, Create a database, with name shoppingcartdb. Create Table. And insert Data using the given queri...
Read more