<!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
>