<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Value Ranger</title>
</head>
<body>
<div class="col-md-6 mx-auto p-0 mb-5 "> <h1>HTML Ranger</h1>
<div class="input-group my-2">
<label for="customRange">Range 1</label>
<input type="range" class="custom-range" id="customRange" min="0" value="4000" max="29813">
<div id="result" class="mb-2">Value: <b></b></div>
</div>
<div class="input-group mb-2">
<label for="customRange">Range 2
</label>
<input type="range" class="custom-range" id="customRange1" min="0" value="12000" max="17817">
<div id="result1" class="mb-2">Value: <b></b></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
// Read value on page load
$("#result b").html($("#customRange").val());
// Read value on change
$("#customRange").change(function(){
$("#result b").html($(this).val());
});
$("#result1 b").html($("#customRange1").val());
// Read value on change
$("#customRange1").change(function(){
$("#result1 b").html($(this).val());
});
});
</script>
</body>
</html>
No comments:
Post a Comment