Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - ColorSlider
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
Basic Usage</button> <button class="tab" onclick="showTab(event, 'controlled-tab')">Controlled</button> <button class="tab" onclick="showTab(event, 'color-picker-tab')">Color Picker</button> <button class="tab" onclick="showTab(event, 'vertical-tab')">Vertical</button> <button class="tab" onclick="showTab(event, 'disabled-tab')">Disabled</button> </div> <div id="basic-tab" class="tab-content active"> <h3>Basic Color Slider</h3> <div id="basic-slider"></div> <div class="value-display" id="basic-value">Value: hsl(0, 100%, 50%)</div> </div> <div id="controlled-tab" class="tab-content"> <h3>Controlled Color Slider</h3> <div id="controlled-slider"></div> <div class="value-display" id="controlled-value">Value: #ff0000</div> </div> <div id="color-picker-tab" class="tab-content"> <h3>RGBA Color Picker</h3> <div id="rgba-picker"></div> <div class="color-preview" id="rgba-preview"></div> <div class="value-display" id="rgba-value">Value: rgba(255, 0, 255, 1)</div> </div> <div id="vertical-tab" class="tab-content"> <h3>Vertical Orientation</h3> <div id="vertical-slider"></div> </div> <div id="disabled-tab" class="tab-content"> <h3>Disabled State</h3> <div id="disabled-slider"></div> </div> <h2>Props</h2> <table class="props-table"> <thead> <tr> <th>Prop</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>channel</td> <td>string</td> <td>-</td> <td>The color channel to display (e.g., "hue", "saturation", "lightness", "red", "green", "blue", "alpha")</td> </tr> <tr> <td>value</td> <td>Color</td> <td>-</td> <td>The current color value (controlled)</td> </tr> <tr> <td>defaultValue</td> <td>Color</td> <td>-</td> <td>The default color value (uncontrolled)</td> </tr> <tr> <td>onChange</td> <td>(color: Color) => void</td> <td>-</td> <td>Handler called when the color changes</td> </tr> <tr> <td>onChangeEnd</td> <td>(color: Color) => void</td> <td>-</td> <td>Handler called when the user stops dragging</td> </tr> <tr> <td>orientation</td> <td>"horizontal" | "vertical"</td> <td>"horizontal"</td> <td>The orientation of the slider</td> </tr> <tr> <td>isDisabled</td> <td>boolean</td> <td>false</td> <td>Whether the slider is disabled</td> </tr> </tbody> </table> <h2>Keyboard Interactions</h2> <table class="props-table"> <thead> <tr> <th>Key</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><span class="keyboard-key">Arrow Left/Right</span></td> <td>Decreases/increases the value by one step</td> </tr> <tr> <td><span class="keyboard-key">Arrow Up/Down</span></td> <td>Increases/decreases the value by one step</td> </tr> <tr> <td><span class="keyboard-key">Home</span></td> <td>Sets the value to the minimum</td> </tr> <tr> <td><span class="keyboard-key">End</span></td> <td>Sets the value to the maximum</td> </tr> <tr> <td><span class="keyboard-key">Page Up/Down</span></td> <td>Increases/decreases the value by a larger step</td> </tr> </tbody> </table> <h2>Starter Kits</h2> <div class="starter-kits"> <div class="starter-kit"> <h4>Tailwind CSS</h4> <p>Complete ColorSlider implementation with Tailwind CSS styling and dark mode support.</p> <a href="https://github.com/adobe/react-spectrum/tree/main/starters/tailwind" target="_blank">View Starter</a> </div> <div class="starter-kit"> <h4>Styled Components</h4> <p>ColorSlider with CSS-in-JS styling using Styled Components.</p> <a href="https://github.com/adobe/react-spectrum/tree/main/starters/styled-components" target="_blank">View Starter</a> </div> <div class="starter-kit"> <h4>CSS Modules</h4> <p>Traditional CSS Modules approach with scoped styling.</p> <a href="https://github.com/adobe/react-spectrum/tree/main/starters/css-modules" target="_blank">View Starter</a> </div> </div> <h2>Accessibility</h2> <p>ColorSlider implements the ARIA slider pattern with the following features:</p> <ul class="features-list"> <li>Proper ARIA roles and properties</li> <li>Keyboard navigation support</li> <li>Screen reader announcements with color descriptions</li> <li>Focus management</li> <li>Touch and mouse interaction support</li> </ul> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this documentation.</p> </div> <script type="module"> // Color utility functions function hslToRgb(h, s, l) { h /= 360; s /= 100; l /= 100; const a = s * Math.min(l, 1 - l); const f = n => { const k = (n + h / (1/12)) % 12; return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); }; return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)]; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]; } function createColorSlider(container, options = {}) { const { channel = 'hue', defaultValue = 'hsl(0, 100%, 50%)', orientation = 'horizontal', isDisabled = false, onChange = () => {}, onChangeEnd = () => {}, label = channel.charAt(0).toUpperCase() + channel.slice(1) } = options; let currentColor = parseColor(defaultValue); let isDragging = false; let focusVisible = false; const slider = document.createElement('div'); slider.className = 'react-aria-ColorSlider'; slider.setAttribute('data-orientation', orientation); if (isDisabled) slider.setAttribute('data-disabled', 'true'); const labelEl = document.createElement('label'); labelEl.className = 'react-aria-Label'; labelEl.textContent = label; const output = document.createElement('output'); output.className = 'react-aria-SliderOutput'; const track = document.createElement('div'); track.className = 'react-aria-SliderTrack'; const thumb = document.createElement('div'); thumb.className = 'react-aria-ColorThumb'; thumb.tabIndex = isDisabled ? -1 : 0; const hiddenInput = document.createElement('input'); hiddenInput.type = 'range'; hiddenInput.className = 'input-hidden'; hiddenInput.setAttribute('aria-label', label); track.appendChild(thumb); track.appendChild(hiddenInput); slider.appendChild(labelEl); slider.appendChild(output); slider.appendChild(track); function parseColor(colorString) { if (colorString.startsWith('hsl')) { const match = colorString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/); if (match) { return { h: parseInt(match[1]), s: parseInt(match[2]), l: parseInt(match[3]), a: 1, format: 'hsl' }; } } else if (colorString.startsWith('rgb')) { const match = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/); if (match) { const [h, s, l] = rgbToHsl(parseInt(match[1]), parseInt(match[2]), parseInt(match[3])); return { h, s, l, a: 1, r: parseInt(match[1]), g: parseInt(match[2]), b: parseInt(match[3]), format: 'rgb' }; } } else if (colorString.startsWith('#')) { const hex = colorString.slice(1); const r = parseInt(hex.substr(0, 2), 16); const g = parseInt(hex.substr(2, 2), 16); const b = parseInt(hex.substr(4, 2), 16); const [h, s, l] = rgbToHsl(r, g, b); return { h, s, l, a: 1, r, g, b, format: 'hex' }; } return { h: 0, s: 100, l: 50, a: 1, format: 'hsl' }; } function updateTrackBackground() { let gradient = ''; const steps = 20; if (channel === 'hue') { const colors = []; for (let i = 0; i <= steps; i++) { const hue = (i / steps) * 360; const [r, g, b] = hslToRgb(hue, currentColor.s, currentColor.l); colors.push(`rgb(${r}, ${g}, ${b})`); } gradient = `linear-gradient(to right, ${colors.join(', ')})`; } else if (channel === 'saturation') { const [r1, g1, b1] = hslToRgb(currentColor.h, 0, currentColor.l); const [r2, g2, b2] = hslToRgb(currentColor.h, 100, currentColor.l); gradient = `linear-gradient(to right, rgb(${r1}, ${g1}, ${b1}), rgb(${r2}, ${g2}, ${b2}))`; } else if (channel === 'lightness') { const [r1, g1, b1] = hslToRgb(currentColor.h, currentColor.s, 0); const [r2, g2, b2] = hslToRgb(currentColor.h, currentColor.s, 50); const [r3, g3, b3] = hslToRgb(currentColor.h, currentColor.s, 100); gradient = `linear-gradient(to right, rgb(${r1}, ${g1}, ${b1}), rgb(${r2}, ${g2}, ${b2}), rgb(${r3}, ${g3}, ${b3}))`; } else if (channel === 'alpha') { const [r, g, b] = hslToRgb(currentColor.h, currentColor.s, currentColor.l); gradient = `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`; track.style.background = `${gradient}, repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`; return; } track.style.background = gradient; } function updateThumbPosition() { let value, max; switch (channel) { case 'hue': value = currentColor.h; max = 360; break; case 'saturation': value = currentColor.s; max = 100; break; case 'lightness': value = currentColor.l; max = 100; break; case 'alpha': value = currentColor.a * 100; max = 100; break; default: value = 0; max = 100; } const percentage = (value / max) * 100; if (orientation === 'horizontal') { thumb.style.left = `${percentage}%`; thumb.style.transform = 'translateX(-50%) translateY(-50%)'; } else { thumb.style.top = `${100 - percentage}%`; thumb.style.transform = 'translateX(-50%) translateY(-50%)'; } const [r, g, b] = hslToRgb(currentColor.h, currentColor.s, currentColor.l); thumb.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${currentColor.a})`; output.textContent = Math.round(value); hiddenInput.value = value; hiddenInput.max = max; } function updateColor(newValue) { const oldColor = {...currentColor}; switch (channel) { case 'hue': currentColor.h = Math.max(0, Math.min(360, newValue)); break; case 'saturation': currentColor.s = Math.max(0, Math.min(100, newValue)); break; case 'lightness': currentColor.l = Math.max(0, Math.min(100, newValue)); break; case 'alpha': currentColor.a = Math.max(0, Math.min(1, newValue / 100)); break; } updateTrackBackground(); updateThumbPosition(); onChange(currentColor); } function handlePointerDown(e) { if (isDisabled) return; isDragging = true; thumb.setAttribute('data-dragging', 'true'); const rect = track.getBoundingClientRect(); let percentage; if (orientation === 'horizontal') { percentage = (e.clientX - rect.left) / rect.width; } else { percentage = 1 - (e.clientY - rect.top) / rect.height; } percentage = Math.max(0, Math.min(1, percentage)); let max; switch (channel) { case 'hue': max = 360; break; case 'alpha': max = 100; break; default: max = 100; } updateColor(percentage * max); document.addEventListener('pointermove', handlePointerMove); document.addEventListener('pointerup', handlePointerUp); e.preventDefault(); } function handlePointerMove(e) { if (!isDragging) return; const rect = track.getBoundingClientRect(); let percentage; if (orientation === 'horizontal') { percentage = (e.clientX - rect.left) / rect.width; } else { percentage = 1 - (e.clientY - rect.top) / rect.height; } percentage = Math.max(0, Math.min(1, percentage)); let max; switch (channel) { case 'hue': max = 360; break; case 'alpha': max = 100; break; default: max = 100; } updateColor(percentage * max); } function handlePointerUp() { if (!isDragging) return; isDragging = false; thumb.removeAttribute('data-dragging'); onChangeEnd(currentColor); document.removeEventListener('pointermove', handlePointerMove); document.removeEventListener('pointerup', handlePointerUp); } function handleKeyDown(e) { if (isDisabled) return; let step = 1; if (channel === 'hue') step = 10; let currentValue; switch (channel) { case 'hue': currentValue = currentColor.h; break; case 'saturation': currentValue = currentColor.s; break; case 'lightness': currentValue = currentColor.l; break; case 'alpha': currentValue = currentColor.a * 100; break; default: currentValue = 0; } switch (e.key) { case 'ArrowLeft': case 'ArrowDown': updateColor(currentValue - step); e.preventDefault(); break; case 'ArrowRight': case 'ArrowUp': updateColor(currentValue + step); e.preventDefault(); break; case 'Home': updateColor(0); e.preventDefault(); break; case 'End': updateColor(channel === 'hue' ? 360 : 100); e.preventDefault(); break; case 'PageUp': updateColor(currentValue + step * 10); e.preventDefault(); break; case 'PageDown': updateColor(currentValue - step * 10); e.preventDefault(); break; } } function handleFocus() { focusVisible = true; thumb.setAttribute('data-focus-visible', 'true'); } function handleBlur() { focusVisible = false; thumb.removeAttribute('data-focus-visible'); } // Event listeners track.addEventListener('pointerdown', handlePointerDown); thumb.addEventListener('keydown', handleKeyDown); thumb.addEventListener('focus', handleFocus); thumb.addEventListener('blur', handleBlur); // Initialize updateTrackBackground(); updateThumbPosition(); container.appendChild(slider); return { setValue: (newColor) => { currentColor = parseColor(newColor); updateTrackBackground(); updateThumbPosition(); }, getValue: () => currentColor, destroy: () => { container.removeChild(slider); } }; } // Initialize examples let basicSlider, controlledSlider, rgbaSliders = [], verticalSlider, disabledSlider; function initExamples() { // Basic example basicSlider = createColorSlider(document.getElementById('basic-slider'), { channel: 'hue', defaultValue: 'hsl(0, 100%, 50%)', onChange: (color) => { document.getElementById('basic-value').textContent = `Value: hsl(${color.h}, ${color.s}%, ${color.l}%)`; } }); // Controlled example controlledSlider = createColorSlider(document.getElementById('controlled-slider'), { channel: 'hue', defaultValue: '#ff0000', onChange: (color) => { const [r, g, b] = hslToRgb(color.h, color.s, color.l); const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join(''); document.getElementById('controlled-value').textContent = `Value: ${hex}`; } }); // RGBA Color Picker const rgbaContainer = document.getElementById('rgba-picker'); const rgbaPreview = document.getElementById('rgba-preview'); const rgbaValue = document.getElementById('rgba-value'); let rgbaColor = { r: 255, g: 0, b: 255, a: 1 }; function updateRgbaDisplay() { rgbaPreview.style.backgroundColor = `rgba(${rgbaColor.r}, ${rgbaColor.g}, ${rgbaColor.b}, ${rgbaColor.a})`; rgbaValue.textContent = `Value: rgba(${rgbaColor.r}, ${rgbaColor.g}, ${rgbaColor.b}, ${rgbaColor.a})`; } ['red', 'green', 'blue', 'alpha'].forEach(channel => { const container = document.createElement('div'); rgbaContainer.appendChild(container); const slider = createColorSlider(container, { channel, defaultValue: `rgba(${rgbaColor.r}, ${rgbaColor.g}, ${rgbaColor.b}, ${rgbaColor.a})`, onChange: (color) => { if (channel === 'red') rgbaColor.r = Math.round(color.r || (color.h !== undefined ? hslToRgb(color.h, color.s, color.l)[0] : 255)); else if (channel === 'green') rgbaColor.g = Math.round(color.g || (color.h !== undefined ? hslToRgb(color.h, color.s, color.l)[1] : 0)); else if (channel === 'blue') rgbaColor.b = Math.round(color.b || (color.h !== undefined ? hslToRgb(color.h, color.s, color.l)[2] : 255)); else if (channel === 'alpha') rgbaColor.a = color.a; updateRgbaDisplay(); } }); rgbaSliders.push(slider); }); updateRgbaDisplay(); // Vertical example verticalSlider = createColorSlider(document.getElementById('vertical-slider'), { channel: 'hue', defaultValue: 'hsb(0, 100%, 100%)', orientation: 'vertical' }); // Disabled example disabledSlider = createColorSlider(document.getElementById('disabled-slider'), { channel: 'red', defaultValue: '#7f007f', isDisabled: true }); } // Tab functionality window.showTab = function(evt, tabName) { const tabContents = document.querySelectorAll('.tab-content'); const tabs = document.querySelectorAll('.tab'); tabContents.forEach(content => content.classList.remove('active')); tabs.forEach(tab => tab.classList.remove('active')); document.getElementById(tabName).classList.add('active'); evt.currentTarget.classList.add('active'); }; // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initExamples); } else { initExamples(); } </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">