<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-8">
<!-- Range with Real-time Value Display -->
<div class="space-y-4">
<label for="range-realtime" class="block text-sm font-medium text-gray-700">Brightness Control</label>
<div class="flex items-center gap-4">
<input
type="range"
id="range-realtime"
min="0"
max="100"
value="70"
class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
oninput="updateRangeValue(this.value, 'range-value-display')"
>
<span id="range-value-display" class="text-sm font-semibold bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center">70%</span>
</div>
</div>
<!-- Color Picker Range -->
<div class="space-y-4">
<label class="block text-sm font-medium text-gray-700">RGB Color Mixer</label>
<div class="space-y-3">
<!-- Red Channel -->
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-red-700 w-6">R</span>
<input
type="range"
id="range-red"
min="0"
max="255"
value="200"
class="flex-1 h-2 bg-gradient-to-r from-black to-red-600 rounded-lg appearance-none cursor-pointer accent-red-600"
oninput="updateColorMixer()"
>
<span id="red-value" class="text-xs text-gray-700 w-8 text-right">200</span>
</div>
<!-- Green Channel -->
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-green-700 w-6">G</span>
<input
type="range"
id="range-green"
min="0"
max="255"
value="150"
class="flex-1 h-2 bg-gradient-to-r from-black to-green-600 rounded-lg appearance-none cursor-pointer accent-green-600"
oninput="updateColorMixer()"
>
<span id="green-value" class="text-xs text-gray-700 w-8 text-right">150</span>
</div>
<!-- Blue Channel -->
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-blue-700 w-6">B</span>
<input
type="range"
id="range-blue"
min="0"
max="255"
value="225"
class="flex-1 h-2 bg-gradient-to-r from-black to-blue-600 rounded-lg appearance-none cursor-pointer accent-blue-600"
oninput="updateColorMixer()"
>
<span id="blue-value" class="text-xs text-gray-700 w-8 text-right">225</span>
</div>
</div>
<!-- Color Preview -->
<div class="flex gap-3">
<div id="color-preview" class="w-16 h-16 rounded-md border border-gray-300" style="background-color: rgb(200, 150, 225);"></div>
<div class="text-sm text-gray-700">
<div>RGB: <span id="rgb-value">(200, 150, 225)</span></div>
<div>HEX: <span id="hex-value">#C896E1</span></div>
</div>
</div>
</div>
</div>
<script>
// Update range value display
function updateRangeValue(value, displayId) {
document.getElementById(displayId).textContent = value + '%';
}
// Update color mixer
function updateColorMixer() {
const redValue = document.getElementById('range-red').value;
const greenValue = document.getElementById('range-green').value;
const blueValue = document.getElementById('range-blue').value;
// Update value displays
document.getElementById('red-value').textContent = redValue;
document.getElementById('green-value').textContent = greenValue;
document.getElementById('blue-value').textContent = blueValue;
// Convert to hex
const redHex = parseInt(redValue).toString(16).padStart(2, '0');
const greenHex = parseInt(greenValue).toString(16).padStart(2, '0');
const blueHex = parseInt(blueValue).toString(16).padStart(2, '0');
const hexColor = `#${redHex}${greenHex}${blueHex}`.toUpperCase();
// Update preview
document.getElementById('color-preview').style.backgroundColor = `rgb(${redValue}, ${greenValue}, ${blueValue})`;
document.getElementById('rgb-value').textContent = `(${redValue}, ${greenValue}, ${blueValue})`;
document.getElementById('hex-value').textContent = hexColor;
}
</script>
</section>