.hue-range-input {
    position: relative;
    width: 360px;
    height: 50px;
    background: linear-gradient(
        to right in hsl,    
        hsl(0deg 100% 50%),    
        hsl(180deg 100% 50%),       
        hsl(359deg 100% 50%)
    );
    border-radius: 8px;
}

.hue-range-input input[type="range"] {
    position: absolute;
    appearance: none;
    width: 100%;
    height: 50px;
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    pointer-events: none;
}

/* CHROME */

.hue-range-input input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 50px;
    background: #333;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
}

.hue-range-input input[type="range"].slider-start::-webkit-slider-thumb {
    border-radius: 8px 0 0 8px;
}

.hue-range-input input[type="range"].slider-end::-webkit-slider-thumb {
    border-radius: 0 8px 8px 0;
}

.hue-range-input input[type="range"]::-webkit-slider-runnable-track {
    appearance: none;
    width: 100%;
    height: 50px;
}

/* FIREFOX */

.hue-range-input input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 50px;
    background: #333;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
}

.hue-range-input input[type="range"].slider-start::-moz-range-thumb {
    border-radius: 8px 0 0 8px;
}

.hue-range-input input[type="range"].slider-end::-moz-range-thumb {
    border-radius: 0 8px 8px 0;
}

.hue-range-input input[type="range"]::-moz-range-track {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: none;
}

/* EDGE */

.hue-range-input input[type="range"]::-ms-thumb {
    width: 10px;
    height: 50px;
    background: #333;
    border: 1px solid #aaa;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
}

.hue-range-input input[type="range"].slider-start::-ms-thumb {
    border-radius: 8px 0 0 8px;
}

.hue-range-input input[type="range"].slider-end::-ms-thumb {
    border-radius: 0 8px 8px 0;
}

.hue-range-input input[type="range"]::-ms-track {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: none;
}