{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjM0NTA1MzUxLCJpYXQiOjE2MzQ1MDE3NTEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.hrP3qkqmAL_tm0mfH_dBy521Av9PVe8qtrFovLoRIpSxlNPWoq4no3nIoImqG2N5PNobSBXlUrDXpm2z4F68xcedUJnitwbGYyj6POYNcP6KoKVkonGRfeqy0gV1ytZLQDrthh2YdLd8pgrJDmrYzfyjvwCDYTiP5bhalR3qxDariRgzgL1aUYgzZ80gmrPAZwKOdFECSB4GwDU_iHnYUqHZxniNSx_RA7_CsLe65IUnx0sC7veM04Bz2UYTamvhf6_XHe80jZrDMStEjaMaTTZeS2sS9dFZJw63XuslcwzbQlsRIM-Q02334CT9TaHn37hacc0wWi8CjEcGA2ZBMQ"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__item":"{\"id\":39361295,\"user_id\":369687,\"html\":\"<main class=\\\"container\\\">\\n\\t<form class=\\\"sliders\\\">\\n\\n\\t\\t<div class=\\\"sliders__fields\\\" id=\\\"red\\\">\\n\\t\\t\\t<label for=\\\"red\\\" class=\\\"sliders__label\\\">R<\\/label>\\n\\t\\t\\t<div class=\\\"sliders__bg\\\">\\n\\t\\t\\t\\t<input name=\\\"red\\\" type=\\\"range\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"136\\\" class=\\\"sliders__slider\\\">\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<span class=\\\"sliders__output\\\">88<\\/span>\\n\\t\\t<\\/div>\\n\\n\\t\\t<div class=\\\"sliders__fields\\\" id=\\\"green\\\">\\n\\t\\t\\t<label for=\\\"green\\\" class=\\\"sliders__label\\\">G<\\/label>\\n\\t\\t\\t<div class=\\\"sliders__bg\\\">\\n\\t\\t\\t\\t<input name=\\\"green\\\" type=\\\"range\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"0\\\" class=\\\"sliders__slider\\\">\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<span class=\\\"sliders__output\\\">00<\\/span>\\n\\t\\t<\\/div>\\n\\n\\t\\t<div class=\\\"sliders__fields\\\" id=\\\"blue\\\">\\n\\t\\t\\t<label for=\\\"blue\\\" class=\\\"sliders__label\\\">B<\\/label>\\n\\t\\t\\t<div class=\\\"sliders__bg\\\">\\n\\t\\t\\t\\t<input name=\\\"blue\\\" type=\\\"range\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"136\\\" class=\\\"sliders__slider\\\">\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<span class=\\\"sliders__output\\\">88<\\/span>\\n\\t\\t<\\/div>\\n\\n\\t<\\/form>\\n\\t<article class=\\\"rgb-color\\\"><\\/article>\\n<\\/main>\\n<style data=\\\"thumb-style\\\" type=\\\"text\\/css\\\"><\\/style>\",\"css\":\"* {\\n\\tbox-sizing: border-box;\\n\\tmargin: 0;\\n\\tpadding: 0;\\n}\\n\\nbody {\\n\\tbackground: hsl(220, 80%, 60%);\\n\\tcolor: white;\\n\\tfont-family: monospace;\\n\\tfont-size: 1.2rem;\\n\\tfont-size: calc(16px + (28 - 16) * ((100vw - 300px) \\/ (2000 - 300)));\\n\\theight: 100%;\\n\\twidth: 100%;\\n}\\n\\n.container {\\n\\tbackground: #181111;\\n\\tbackground: radial-gradient(circle, hsl(0, 7%, 12%) 30%, hsl(0, 7%, 5%) 100%);\\n\\n\\tbox-shadow: 0px 10px 30px hsla(0, 0%, 0%, 0.5);\\n\\tcolor: black;\\n\\tdisplay: grid;\\n\\tgrid-gap: 2vw;\\n\\tgrid-template: 1fr \\/ 1fr 96vmin;\\n\\tgrid-template-areas: \\\"sliders square\\\";\\n\\n\\theight: 1000px;\\n\\theight: 100vh;\\n\\n\\tpadding: 2%;\\n\\tpadding: 2vw;\\n\\n\\twidth: 100%;\\n\\twidth: 100vw;\\n}\\n\\n.rgb-color {\\n\\tbackground: crimson;\\n\\tdisplay: grid;\\n\\tplace-items: center;\\n\\tgrid-area: square;\\n}\\n\\n.rgb-color::after {\\n\\tanimation: title-fade 1s 4s 1 ease-out forwards;\\n\\tcolor: white;\\n\\tcontent: 'RGB';\\n\\tfont-family: futura, sans-serif;\\n\\tfont-size: 5em;\\n\\tfont-weight: bold;\\n}\\n\\n@keyframes title-fade {\\n\\tfrom {opacity: 1;}\\n\\tto {opacity: 0;}\\n}\\n\\n.sliders {\\n\\tbackground: #181111;\\n\\tbackground: radial-gradient(circle, hsl(0, 7%, 12%) 30%, hsl(0, 7%, 5%) 100%);\\n\\n\\tborder: 1px solid #666;\\n\\tcolor: white;\\n\\tdisplay: grid;\\n\\tgrid-area: sliders;\\n\\tgrid-gap: 1.6em;\\n\\tpadding: 2em 2em 2.1em;\\n\\talign-content: center;\\n}\\n\\n.sliders__fields {\\n\\tborder: none;\\n\\tdisplay: grid;\\n\\tgrid-gap: 1.2em;\\n\\tgrid-template-columns: auto 1fr auto;\\n\\tgrid-template-areas: \\\"label slider output\\\";\\n\\talign-items: center;\\n}\\n\\n.sliders__label {\\n\\tgrid-area: label;\\n\\tjustify-self: start;\\n}\\n\\n.sliders__slider {\\n\\tcursor: pointer;\\n\\toutline: none;\\n\\tmargin: 0;\\n\\twidth: 100%;\\n}\\n\\n.sliders__bg {\\n\\tborder: 1px solid black;\\n\\tborder-radius: 1.5em;\\n\\tbox-shadow: -1px 1px 3px 0px hsla(0, 0%, 100%, 0.3);\\n\\tdisplay: grid;\\n\\tgrid-area: slider;\\n\\twidth: 100%;\\n}\\n\\n.sliders__output {\\n\\tgrid-area: output;\\n\\tjustify-self: end;\\n}\\n\\n@media screen and (max-width: 220vmin) {\\n\\t.container {\\n\\t\\tgrid-template: 1fr auto \\/ 1fr;\\n\\t\\tgrid-template-areas:\\n\\t\\t\\t\\\"square\\\"\\n\\t\\t\\t\\\"sliders\\\";\\n\\t}\\n}\\n\\n@media screen and (max-width: 400px) {\\n\\t.sliders {\\n\\t\\tpadding: 1.2em 2em 2.8em;\\n\\t}\\n\\t.sliders__fields {\\n\\t\\tborder: none;\\n\\t\\tdisplay: grid;\\n\\t\\tgrid-gap: 0.5em;\\n\\t\\tgrid-template: 1fr 1fr \\/ 1fr 1fr;\\n\\t\\tgrid-template-areas:\\n\\t\\t\\t\\\"label output\\\"\\n\\t\\t\\t\\\"slider slider\\\";\\n\\t}\\n\\n\\t[for=\\\"red\\\"]:after {\\n\\t\\tcontent: \\\"ed\\\";\\n\\t}\\n\\n\\t[for=\\\"green\\\"]:after {\\n\\t\\tcontent: \\\"reen\\\";\\n\\t}\\n\\n\\t[for=\\\"blue\\\"]:after {\\n\\t\\tcontent: \\\"lue\\\";\\n\\t}\\n}\\n\\n\\/\\/ From here on down is Ana Tudor's code;\\n\\/\\/ I'm not sure what all of it does.\\n\\/\\/ Styling sliders is not trivial.\\n\\/\\/ https:\\/\\/codepen.io\\/thebabydino\\/pen\\/goYYrN\\n\\n$track-w: 100%;\\n$track-h: 0em;\\n$thumb-d: 1.5em;\\n$track-c: #ccc;\\n$filll-c: #95a;\\n\\n@mixin track($fill: 0) {\\n\\tbox-sizing: border-box;\\n\\tborder: none;\\n\\twidth: $track-w;\\n\\theight: $track-h;\\n\\tbackground: $track-c;\\n}\\n\\n@mixin fill() {\\n\\theight: $track-h;\\n\\tbackground: $filll-c;\\n}\\n\\n@mixin thumb() {\\n\\tbox-sizing: border-box;\\n\\tborder: none;\\n\\tbox-shadow: 0px 0px 0px 0.1em black, 0px 0px 0px 0.3em white,\\n\\t\\t0px 0px 0px 0.4em black;\\n\\twidth: $thumb-d;\\n\\theight: $thumb-d;\\n\\tborder-radius: 50%;\\n\\tbackground: #f90;\\n}\\n\\n[type=\\\"range\\\"] {\\n\\t&,\\n\\t&::-webkit-slider-thumb {\\n\\t\\t-webkit-appearance: none;\\n\\t}\\n\\n\\tmargin: 0;\\n\\tpadding: 0;\\n\\twidth: $track-w;\\n\\theight: $thumb-d;\\n\\tbackground: transparent;\\n\\tfont: 1em\\/1 arial, sans-serif;\\n\\n\\t&::-webkit-slider-runnable-track {\\n\\t\\t@include track(1);\\n\\t}\\n\\t&::-moz-range-track {\\n\\t\\t@include track;\\n\\t}\\n\\t&::-ms-track {\\n\\t\\t@include track;\\n\\t}\\n\\n\\t&::-moz-range-progress {\\n\\t\\t@include fill;\\n\\t}\\n\\t&::-ms-fill-lower {\\n\\t\\t@include fill;\\n\\t}\\n\\n\\t&::-webkit-slider-thumb {\\n\\t\\tmargin-top: 0.5*($track-h - $thumb-d);\\n\\t\\t@include thumb;\\n\\t}\\n\\t&::-moz-range-thumb {\\n\\t\\t@include thumb;\\n\\t}\\n\\t&::-ms-thumb {\\n\\t\\tmargin-top: 0;\\n\\t\\t@include thumb;\\n\\t}\\n\\n\\t&::-ms-tooltip {\\n\\t\\tdisplay: none;\\n\\t}\\n}\",\"parent\":19902510,\"js\":\"'use strict';\\n\\nconst ColorSelector = function() {\\n\\tthis.redSlider = document.querySelector('[name=red]');\\n\\tthis.greenSlider = document.querySelector('[name=green]');\\n\\tthis.blueSlider = document.querySelector('[name=blue]');\\n\\t\\n\\tthis.output = document.querySelector('.rgb-color');\\n\\tthis.thumbStyle = document.querySelector('[data=thumb-style]');\\n\\t\\n\\tthis.red = 1 * this.redSlider.value;\\n\\tthis.green = 1 * this.greenSlider.value;\\n\\tthis.blue = 1 * this.blueSlider.value;\\n\\t\\n\\tthis.redBg = document.querySelector('#red>.sliders__bg');\\n\\tthis.greenBg = document.querySelector('#green>.sliders__bg');\\n\\tthis.blueBg = document.querySelector('#blue>.sliders__bg');\\n\\t\\n\\tthis.redOut = document.querySelector('#red>span');\\n\\tthis.greenOut = document.querySelector('#green>span');\\n\\tthis.blueOut = document.querySelector('#blue>span');\\n}\\n\\nColorSelector.prototype.init = function() {\\n\\tthis.redSlider.oninput = this.handleRed.bind(this);\\n\\tthis.greenSlider.oninput = this.handleGreen.bind(this);\\n\\tthis.blueSlider.oninput = this.handleBlue.bind(this);\\n\\t\\n\\tthis.updateRed();\\n\\tthis.updateGreen();\\n\\tthis.updateBlue();\\n\\t\\n\\tthis.redOut.textContent = ('0' + this.red.toString(16).toUpperCase()).slice(-2);\\n\\tthis.greenOut.textContent = ('0' + this.green.toString(16).toUpperCase()).slice(-2);\\n\\tthis.blueOut.textContent = ('0' + this.blue.toString(16).toUpperCase()).slice(-2);\\n\\t\\n\\tthis.updateThumbs();\\n\\tthis.updateScreen();\\n}\\n\\nColorSelector.prototype.updateScreen = function() {\\n\\tthis.output.style.background = `rgb(${this.red},${this.green},${this.blue})`;\\n}\\n\\nColorSelector.prototype.updateRed = function() {\\n\\tconst green = this.green;\\n\\tconst blue = this.blue;\\n\\tthis.redBg.style.background = \\n\\t\\t`linear-gradient(to right, rgb(0,${green},${blue}), rgb(255,${green},${blue}))`;\\n}\\n\\nColorSelector.prototype.updateGreen = function() {\\n\\tconst red = this.red;\\n\\tconst blue = this.blue;\\n\\tthis.greenBg.style.background = \\n\\t\\t`linear-gradient(to right, rgb(${red},0,${blue}), rgb(${red},255,${blue}))`;\\n}\\n\\nColorSelector.prototype.updateBlue = function() {\\n\\tconst red = this.red;\\n\\tconst green = this.green;\\n\\tthis.blueBg.style.background = \\n\\t\\t`linear-gradient(to right, rgb(${red},${green},0), rgb(${red},${green},255))`;\\n}\\n\\nColorSelector.prototype.updateThumbs = function() {\\n\\tconst red = this.red;\\n\\tconst green = this.green;\\n\\tconst blue = this.blue;\\n\\tconst rgb = `-thumb{background: rgb(${red},${green},${blue});}`\\n\\tthis.thumbStyle.innerHTML = \\n\\t\\t'[name=red]::-webkit-slider' + rgb +\\n\\t\\t'[name=red]::-moz-range' + rgb +\\n\\t\\t'[name=red]::-ms' + rgb +\\n\\t\\t'[name=green]::-webkit-slider' + rgb +\\n\\t\\t'[name=green]::-moz-range' + rgb +\\n\\t\\t'[name=green]::-ms' + rgb +\\n\\t\\t'[name=blue]::-webkit-slider' + rgb +\\n\\t\\t'[name=blue]::-moz-range' + rgb +\\n\\t\\t'[name=blue]::-ms' + rgb;\\n}\\n\\nColorSelector.prototype.handleRed = function(e) {\\n\\tthis.red = 1 * e.target.value;\\n\\tthis.redOut.textContent = ('0' + this.red.toString(16).toUpperCase()).slice(-2);\\n\\tthis.updateThumbs();\\n\\tthis.updateGreen();\\n\\tthis.updateBlue();\\n\\tthis.updateScreen();\\n}\\n\\nColorSelector.prototype.handleGreen = function(e) {\\n\\tthis.green = 1 * e.target.value;\\n\\tthis.greenOut.textContent = ('0' + this.green.toString(16).toUpperCase()).slice(-2);\\n\\tthis.updateThumbs();\\n\\tthis.updateRed();\\n\\tthis.updateBlue();\\n\\tthis.updateScreen();\\n}\\n\\nColorSelector.prototype.handleBlue = function(e) {\\n\\tthis.blue = 1 * e.target.value;\\n\\tthis.blueOut.textContent = ('0' + this.blue.toString(16).toUpperCase()).slice(-2);\\n\\tthis.updateThumbs();\\n\\tthis.updateRed();\\n\\tthis.updateGreen();\\n\\tthis.updateScreen();\\n}\\n\\nconst colorSelector = new ColorSelector(document.querySelector('main.container'));\\ncolorSelector.init();\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2019-08-15T01:46:24.000Z\",\"updated_at\":\"2019-08-22T15:24:29.000Z\",\"session_hash\":\"63abc8fd56998a5c5cf3418b2720be80\",\"title\":\"RGB color selector\",\"description\":\"RGB color selector, with slider code by [Ana Tudor](https:\\/\\/codepen.io\\/thebabydino\\/pen\\/goYYrN).\",\"slug_hash\":\"jONqVLY\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"cbc8bcd48473e878c8f2da27c011d453\",\"has_animation\":true,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"7292d402-ae8a-4deb-88a7-c8191c82fe97\",\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"js_module\":null,\"pen_hash\":null,\"hashid\":\"jONqVLY\"}"}