Design a Range Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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:
Contact Us