The Range Calculator is a web application that allows users to select a value within a specified range using a range input slider. The selected value is then displayed in a text input field below the slider.
Prerequisites
Approach
- Use HTML to create the structure of the web page.
- Utilize Tailwind CSS for styling the elements.
- Implement a range input slider to allow users to select a value within a specified range.
- Display the selected value in a text input field below the slider.
- Update the displayed value dynamically as the user interacts with the range input slider.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The Range Calculator</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex justify-center items-center">
<div class="max-w-md w-full p-8 bg-white rounded-lg
shadow-lg border-2 border-green-400">
<h1 class="text-3xl font-semibold text-center
mb-8">Range Calculator</h1>
<div class="mb-4">
<label for="rangeInput"
class="block text-sm font-medium
text-gray-700 mb-2">Select a range:</label>
<input type="range" id="rangeInput" name="rangeInput"
min="0" max="100" value="50"
class="w-full h-10 rounded-md appearance-none
bg-gray-200 focus:outline-none focus:bg-blue-100" />
</div>
<div class="mb-4 flex justify-between">
<span class="text-gray-700">0</span>
<span class="text-gray-700">100</span>
</div>
<div class="mb-4">
<label for="output"
class="block text-sm font-medium text-gray
-700 mb-2">Selected value:</label>
<input type="text" id="output" name="output"
class="w-full border border-gray-300
rounded-md px-3 py-2 focus:outline-none
focus:border-blue-500" readonly />
</div>
</div>
<script>
const rangeInput = document.getElementById('rangeInput');
const output = document.getElementById('output');
rangeInput.addEventListener('input', function () {
output.value = rangeInput.value;
});
output.value = rangeInput.value;
</script>
</body>
</html>
|
Output:
Recommended Articles