.hue-slider{-webkit-appearance:none;width:300px;height:30px;border-radius:6px;background:linear-gradient(90deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));outline:none;border:none;cursor:pointer}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;border-radius:50%;background:hsl(--primary-hue,100%,50%);border:2px solid #ccc;cursor:pointer;margin-top:-3px}.hue-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background-color:white;border:2px solid #ccc;cursor:pointer}.chroma-slider{-webkit-appearance:none;width:300px;height:30px;border-radius:6px;background:linear-gradient(90deg,hsl(0,0%,100%),hsl(0,0%,0%));outline:none;border:none;cursor:pointer;background:linear-gradient(90deg,hsl(--primary-hue,0%,50%),hsl(--primary-hue,100%,50%))}.chroma-slider::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;border-radius:50%;background:--currentColor;border:2px solid #ccc;cursor:pointer;margin-top:-3px}.chroma-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background-color:white;border:2px solid #ccc;cursor:pointer}