Color Picker Slider Control

<div class="bg-white bg-opacity-5 backdrop-blur-xl rounded-2xl border border-white border-opacity-10 shadow-2xl p-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Asap:wght@300;400;500;600&display=swap'); .color-picker { font-family: 'Asap', sans-serif; } .slider-container { position: relative; margin: 0.5rem 0; } .slider-thumb { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; outline: none; cursor: pointer; transition: all 0.2s ease; background: linear-gradient(90deg, hsl(0, 70%, 60%), hsl(60, 70%, 60%), hsl(120, 70%, 60%), hsl(180, 70%, 60%), hsl(240, 70%, 60%), hsl(300, 70%, 60%), hsl(360, 70%, 60%)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.75) 100%); cursor: pointer; border: 3px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .slider-thumb::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 6px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.6); } .slider-value { position: absolute; top: -2.5rem; transform: translateX(-50%); padding: 0.4rem 0.8rem; background: rgba(0, 0, 0, 0.8); color: white; font-size: 0.75rem; font-weight: 500; border-radius: 6px; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; white-space: nowrap; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .slider-value::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(0, 0, 0, 0.8); } .slider-thumb:hover + .slider-value, .slider-thumb:focus + .slider-value { opacity: 1; transform: translateX(-50%) translateY(-2px); } .slider-label { display: block; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.75rem; line-height: 1.3; }
  </style>
  <div class="color-picker">
    <h2 class="text-white font-medium text-lg mb-6">Pick your own colors!</h2>
    <div class="space-y-6 w-full">
      <div class="slider-container">
        <label class="slider-label">Primary Hue</label>
        <input type="range" id="hue1" min="0" max="360" value="255" class="slider-thumb">
        <div class="slider-value" slider-container"="">
          <label class="slider-label">Secondary Hue</label>
          <input type="range" id="hue2" min="0" max="360" value="222" class="slider-thumb">
          <div class="slider-value" id="hue2-value">222°</div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function() { const hue1Slider = document.getElementById('hue1'); const hue2Slider = document.getElementById('hue2'); const hue1Value = document.getElementById('hue1-value'); const hue2Value = document.getElementById('hue2-value'); function updateSliderValue(slider, valueDisplay) { valueDisplay.textContent = slider.value + '°'; const percent = (slider.value - slider.min) / (slider.max - slider.min); valueDisplay.style.left = percent * 100 + '%'; valueDisplay.style.transform = 'translateX(-50%)'; } function addSliderEvents(slider, valueDisplay) { slider.addEventListener('input', function() { updateSliderValue(slider, valueDisplay); }); slider.addEventListener('mouseenter', function() { valueDisplay.style.opacity = '1'; }); slider.addEventListener('mouseleave', function() { valueDisplay.style.opacity = '0'; }); slider.addEventListener('focus', function() { valueDisplay.style.opacity = '1'; }); slider.addEventListener('blur', function() { valueDisplay.style.opacity = '0'; }); } addSliderEvents(hue1Slider, hue1Value); addSliderEvents(hue2Slider, hue2Value); updateSliderValue(hue1Slider, hue1Value); updateSliderValue(hue2Slider, hue2Value); });
    </script>
  </div>
</div>