How to get/set HTML5 Range Slider's value in PHP?
Reading HTML5 Progress bar value in PHP
In this blog, I am going to discuss on HTML5 Slider. Range Slider is one of the form controls introduced in HTML5. This slider control works in all modern browsers. So How to use slider in PHP?. In this example, we are going to learn How to set and get HTML5 Range Slider's value using PHP.
Here is the code example:
index.php
<!DOCTYPE html>
<html> <head>
<title>e-trainings Demo - HTML5 Range Slider's value read in PHP </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h2>How to get/set HTML5 Range Slider's value in PHP?</h2> <?php
$theValue = 10; //Set the range default value to 10 if(isset($_POST['slider1'])) {
$theValue = $_POST['slider1']; } ?> <div class="form-group"> <label for="exampleInput">Range Value:</label> <input id="slider" type="text" class="form-control" value="<?php echo $theValue; ?>"/> </div> <form action="" method="post"> Slider: <div class="form-group"> <label for="exampleInput">Select Range Value</label>
<input id="slider1" name="slider1" type="range" min="0" max="100" step="10"
value="<?php echo $theValue ?>" /> </div> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </div>
</body>
</html>
I hope you got some idea on how to capture HTML5 Progress Bar value into a textbox.


Comments
Post a Comment