HSL Color Picker Web Component

Deatils

• This is where I built the initial color picker for my Fonts and Colors site
• I decided to limit the component to just the sliders. They fire an event when they change that can be used for functionality on the parent page. For example, the color box above the sliders is generated on the parent page and not in the component
• The example below is build diretly from the code snippets to ensure evrything works.
• Additional notes are below the code

Example

HTML

<div id="preview-block"></div>
<hsla-picker id="the-picker" h="270" s="50" l="40"></hsla-picker>
<!-- TODO: Make these labesl -->

h:<input id="h-value" type="text" size="3" value="" />

s:<input id="s-value" type="text" size="3" value="" />

l:<input id="l-value" type="text" size="3" value="" />

<input id="hex-value" type="text" size="7" />

CSS

#preview-block {
  width: 180px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 10px;
}

JavaScript

////////////////////////////////////////////////////
// This is the component itself

class hslaPicker extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })

        this.styles = document.createElement('style')
        this.styles.innerText = `
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 180px;
}
`
        this.keys = ['h', 's', 'l']

        // potential optimzation: debounce
        const handleSliderMovement = (event) => {
            this.keys.forEach((key) => {
                this.setAttribute(key, this.values[key].slider.value)
            })
            this.doUpdate()
        }

        this.doUpdate = () => {
            this.keys.forEach((key) => {
                this.values[key].slider.setAttribute(
                    'value',
                    this.getAttribute(key)
                )
            })

            this.values.h.background.style.background = `linear-gradient(
                0.25turn,
                hsl(0, ${this.getAttribute('s')}%, ${this.getAttribute('l')}%),
                hsl(45, ${this.getAttribute('s')}%, ${this.getAttribute('l')}%),
                hsl(90, ${this.getAttribute('s')}%, ${this.getAttribute('l')}%),
                hsl(135, ${this.getAttribute('s')}%, ${this.getAttribute(
                'l'
            )}%),
                hsl(180, ${this.getAttribute('s')}%, ${this.getAttribute(
                'l'
            )}%),
                hsl(225, ${this.getAttribute('s')}%, ${this.getAttribute(
                'l'
            )}%),
                hsl(270, ${this.getAttribute('s')}%, ${this.getAttribute(
                'l'
            )}%),
                hsl(315, ${this.getAttribute('s')}%, ${this.getAttribute(
                'l'
            )}%),
                hsl(360, ${this.getAttribute('s')}%, ${this.getAttribute('l')}%)
            )`

            this.values.s.background.style.background = `linear-gradient(
            0.25turn,
            hsl(${this.getAttribute('h')}, 0%, ${this.getAttribute('l')}%),
            hsl(${this.getAttribute('h')}, 100%, ${this.getAttribute('l')}%))`

            this.values.l.background.style.background = `linear-gradient(
            0.25turn,
            hsl(${this.getAttribute('h')}, ${this.getAttribute('s')}%, 0%),
            hsl(${this.getAttribute('h')}, ${this.getAttribute('s')}%, 50%),
            hsl(${this.getAttribute('h')}, ${this.getAttribute('s')}%, 100%)`
        }

        const makeValueObject = (key, max) => {
            const valueObject = {}

            valueObject.wrapper = document.createElement('div')
            valueObject.wrapper.style.position = 'relative'
            valueObject.wrapper.style.width = '180px'
            valueObject.wrapper.style.height = '26px'

            valueObject.background = document.createElement('div')
            valueObject.background.style.position = 'absolute'
            valueObject.background.style.width = '180px'
            valueObject.background.style.height = '15px'
            valueObject.background.style.padding = '0'
            valueObject.background.style.margin = '0'
            valueObject.background.style.border = '1px solid white'
            valueObject.background.style.borderRadius = '30px'

            valueObject.slider = document.createElement('input')
            valueObject.slider.setAttribute('id', `${key}-slider`)
            valueObject.slider.setAttribute('name', `${key}-slider`)
            valueObject.slider.setAttribute('type', 'range')
            valueObject.slider.setAttribute('min', '0')
            valueObject.slider.setAttribute('max', `${max}`)
            valueObject.slider.style.position = 'absolute'
            valueObject.slider.style.padding = '0'
            valueObject.slider.style.margin = '0'
            valueObject.slider.addEventListener('input', handleSliderMovement)

            valueObject.wrapper.appendChild(valueObject.background)
            valueObject.wrapper.appendChild(valueObject.slider)

            return valueObject
        }

        this.values = {
            h: makeValueObject('h', 360),
            s: makeValueObject('s', 100),
            l: makeValueObject('l', 100),
            // a: makeValueObject('a', 1),
        }

        this.shadowRoot.append(this.styles)
    }

    connectedCallback() {
        if (!this.hasAttribute('h')) {
            this.setAttribute('h', 280)
        }
        if (!this.hasAttribute('s')) {
            this.setAttribute('s', 20)
        }
        if (!this.hasAttribute('l')) {
            this.setAttribute('l', 40)
        }

        this.doUpdate()

        this.shadowRoot.append(this.values.s.wrapper)
        this.shadowRoot.append(this.values.l.wrapper)
        this.shadowRoot.append(this.values.h.wrapper)
    }
}

customElements.define('hsla-picker', hslaPicker)

////////////////////////////////////////////////////
// This would to in the main script

const init = () => {



}

document.addEventListener('DOMContentLoaded', init)

Notes

• The inital color is set by passing in values. Right now, this is not optional
• I'm using default form controls, but still need to review the accessability of the component. Probably adding lables would make sense.
• I switched the order of the sliders to something that makes more sense to me. I see the hue more as the foundation hence I put it at the bottom of the stack
• The slider color gets a little off from the background at the ends. This is because the slider is based off the center point of the moving piece (aka thumb) but the background colors extend to the full edge. I played around with a design with the gradient ends extending in. I didn't like it. Next up will be to setup so the slider thumb goes out a little.
• The CSS is not needed for the component itself, it's there to render the output display block from teh parent page.
• Same goes for the 'preview-block' div. That's an implementation detail from the parent page
• The JavaScript block includes both the web compnent and the code that to use it from the parent page (which is at the bottom).
• I check the background colors for the sliders work on Chrome, Firefox, and Safari on macOS 12.x. Other setups TBD

TODO

• [ ] - Add default values so it's not required to send in initail values
• [ ] - Refactor the first addition of the values for the range sliders so the don't get set twice on init
• [ ] - Write up details on the functionality
• [ ] - Refactor to remove the duplication of creating each slider
• [ ] - Adjust so the slider thumb can extend so the center point ends up at the edge of the background boundries
• [ ] - Make it responsive
• [ ] - Setup to use arrow keys to bump the value for the last slider that was interacted with
• [ ] - Add alpha
• [ ] - Send RBG values and all the various other color formats in raw text and something that can be copied direcly into a stylesheet
• [ ] - Add second selection for color to put under alpha
• [ ] - Add debouce option to slow down sending event signal
• [ ] - See about using cookies to store values so they are the same on refresh, etc... Guessing sending an ID will be require
• [ ] - Make the size of the background configurable

References

• MDN: <color>
• MDN: hsla()
• MDN: <input type="range">
• MDN: linear-gradient()
• MDN: hsl()
• Creating A Custom Range Input That Looks Consistent Across All Browsers
• MDN: border-radius
• CSS3 Gradients by pixel, instead of percentage
• MDN: Pseudo-classes and pseudo-elements
• Rebecca Purple
• Creating an Accessible Range Slider with CSS
• Everything There Is To Know About Cross-Browser Styling Of The Range Input
• MDN: Using CSS gradients
• MDN: linear-gradient()
• Creating A Custom Range Input That Looks Consistent Across All Browsers
• How to Style Input Type Range in Chrome, Firefox, and IE