Design a Range Calculator in Tailwind CSS

Last Updated : 24 Apr, 2025

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.

af1

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/[email protected]/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:

af1

Design a Discount Calculator in Tailwind CSS

maha123

Improve

Article Tags :

Design a Range Calculator in Tailwind CSS

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?