Switch rotate circle Toggle

[{"id":"871b20d6-f823-40f9-95f2-2c70680979e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1b453c3b-eb2f-4099-9089-c2609b1d2baf","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: #ffffff;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.play-switch {\\n --track-width: 130px;\\n --track-height: 42px;\\n --knob-size: 36px;\\n --gap: 3px;\\n\\n position: relative;\\n display: inline-block;\\n width: var(--track-width);\\n height: var(--track-height);\\n}\\n\\n.play-switch__input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.play-switch__track {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n overflow: hidden;\\n border-radius: 999px;\\n background: #313033;\\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__text {\\n position: absolute;\\n top: 50%;\\n left: 48px;\\n right: 16px;\\n transform: translateY(-50%);\\n color: #ffffff;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n text-align: center;\\n user-select: none;\\n transition:\\n left 0.35s cubic-bezier(0.22, 1, 0.36, 1),\\n right 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__knob {\\n position: absolute;\\n top: 50%;\\n left: var(--gap);\\n width: var(--knob-size);\\n height: var(--knob-size);\\n border-radius: 50%;\\n background: #ffffff;\\n transform: translateY(-50%) translateX(0) rotate(0deg);\\n transition:\\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\\n outline 0.25s ease;\\n}\\n\\n.play-switch__icon {\\n position: absolute;\\n inset: 0;\\n display: grid;\\n place-items: center;\\n color: #313033;\\n line-height: 0;\\n}\\n\\n.play-switch__icon svg {\\n display: block;\\n}\\n\\n.play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__text {\\n left: 16px;\\n right: 48px;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__knob {\\n transform: translateY(-50%)\\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\\n rotate(360deg);\\n outline: 5px solid rgba(255, 255, 255, 0.25);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .play-switch__track,\\n .play-switch__text,\\n .play-switch__knob {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Switch rotate circle Toggle\\n \\n \\n \\n

\\n \\n \\n\\n \\n Play\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"98f6f624-676d-41f5-a8d1-47d221d16ac7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"291cd04b-22d8-4782-8703-be9e016c46fe","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"00a73b65-15d1-4354-beaf-1e40ede13e0a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n \\n\\n \\n Play\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b82685e5-689d-418a-9fb2-25b7709feb0f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"f923fb4b-6652-4dd6-8584-9910867ef991","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: #ffffff;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.play-switch {\\n --track-width: 130px;\\n --track-height: 42px;\\n --knob-size: 36px;\\n --gap: 3px;\\n\\n position: relative;\\n display: inline-block;\\n width: var(--track-width);\\n height: var(--track-height);\\n}\\n\\n.play-switch__input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\\n\\n.play-switch__track {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n overflow: hidden;\\n border-radius: 999px;\\n background: #313033;\\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__text {\\n position: absolute;\\n top: 50%;\\n left: 48px;\\n right: 16px;\\n transform: translateY(-50%);\\n color: #ffffff;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n text-align: center;\\n user-select: none;\\n transition:\\n left 0.35s cubic-bezier(0.22, 1, 0.36, 1),\\n right 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__knob {\\n position: absolute;\\n top: 50%;\\n left: var(--gap);\\n width: var(--knob-size);\\n height: var(--knob-size);\\n border-radius: 50%;\\n background: #ffffff;\\n transform: translateY(-50%) translateX(0) rotate(0deg);\\n transition:\\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\\n outline 0.25s ease;\\n}\\n\\n.play-switch__icon {\\n position: absolute;\\n inset: 0;\\n display: grid;\\n place-items: center;\\n color: #313033;\\n line-height: 0;\\n}\\n\\n.play-switch__icon svg {\\n display: block;\\n}\\n\\n.play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__text {\\n left: 16px;\\n right: 48px;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__knob {\\n transform: translateY(-50%)\\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\\n rotate(360deg);\\n outline: 5px solid rgba(255, 255, 255, 0.25);\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .play-switch__track,\\n .play-switch__text,\\n .play-switch__knob {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a41c1bb-1e42-47d2-85fa-d988d151d427","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"47e36946-0388-4f43-b100-8f7927f0546a","type":"divider","props":{},"children":[]},{"id":"a814b1c6-5a9f-4319-862b-1d74737a7837","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"68f82955-a8e4-46c2-999f-d8a37041ce90","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The component is a play switch toggle. It starts with a dark gray pill track, white knob, and play icon. When checked, the track turns purple, the knob moves to the right, and the icon rotates.","styles":{}}],"children":[]},{"id":"786081ef-ff7d-49ee-9b95-d150c8df6d9e","type":"procode","props":{"code":".play-switch__track {\n background: #313033;\n}\n\n.play-switch__input:checked + .play-switch__track {\n background: #8a5cd4;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s7lmw8dgz\",\"name\":\"code\",\"code\":\".play-switch__track {\\n background: #313033;\\n}\\n\\n.play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3601fa86-7383-4560-9d7e-2074dadae82c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The switch is centered using CSS Grid. The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" wrapper fills the full viewport height and places the switch in the middle.","styles":{}}],"children":[]},{"id":"279f9a6c-6ca0-43a8-9e56-c57e7e11a213","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"s417nmcke\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d42417de-33fa-4f31-a106-913be1c298e0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Switch Wrapper\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".play-switch","styles":{"code":true}},{"type":"text","text":" is the main label wrapper. It defines the switch size using CSS variables.","styles":{}}],"children":[]},{"id":"30856573-9ce4-4153-8711-d64536931d54","type":"procode","props":{"code":".play-switch {\n --track-width: 130px;\n --track-height: 42px;\n --knob-size: 36px;\n --gap: 3px;\n\n position: relative;\n display: inline-block;\n width: var(--track-width);\n height: var(--track-height);\n}","language":"javascript","filename":"","files":"[{\"id\":\"orsqc1ge7\",\"name\":\"code\",\"code\":\".play-switch {\\n --track-width: 130px;\\n --track-height: 42px;\\n --knob-size: 36px;\\n --gap: 3px;\\n\\n position: relative;\\n display: inline-block;\\n width: var(--track-width);\\n height: var(--track-height);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1bcb4acd-90ff-464f-aecf-d9c99bac1792","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Checkbox\n","styles":{"bold":true}},{"type":"text","text":"The real checkbox is hidden visually, but it still controls the checked state.","styles":{}}],"children":[]},{"id":"f29f3625-20f7-4bf4-a379-660525e2dc68","type":"procode","props":{"code":".play-switch__input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"o9iafk3wu\",\"name\":\"code\",\"code\":\".play-switch__input {\\n position: absolute;\\n opacity: 0;\\n pointer-events: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a7c6ffe-03e2-4128-8103-cfe17a9b13c6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Track Base\n","styles":{"bold":true}},{"type":"text","text":"The ","styles":{}},{"type":"text","text":".play-switch__track","styles":{"code":true}},{"type":"text","text":" is the visible pill background. It fills the whole switch wrapper.","styles":{}}],"children":[]},{"id":"aeeb1101-cfc1-440d-98ae-316063270075","type":"procode","props":{"code":".play-switch__track {\n position: absolute;\n inset: 0;\n cursor: pointer;\n overflow: hidden;\n border-radius: 999px;\n background: #313033;\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"pt71qs2ij\",\"name\":\"code\",\"code\":\".play-switch__track {\\n position: absolute;\\n inset: 0;\\n cursor: pointer;\\n overflow: hidden;\\n border-radius: 999px;\\n background: #313033;\\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a6b1317-59f9-48dd-a488-dc16da340f57","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Base State\n","styles":{"bold":true}},{"type":"text","text":"The text sits inside the track, positioned more toward the right side when unchecked.","styles":{}}],"children":[]},{"id":"115cc3e0-ebca-4d37-abed-92496a6a164f","type":"procode","props":{"code":".play-switch__text {\n position: absolute;\n top: 50%;\n left: 48px;\n right: 16px;\n transform: translateY(-50%);\n color: #ffffff;\n font-size: 14px;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n user-select: none;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lqkbko216\",\"name\":\"code\",\"code\":\".play-switch__text {\\n position: absolute;\\n top: 50%;\\n left: 48px;\\n right: 16px;\\n transform: translateY(-50%);\\n color: #ffffff;\\n font-size: 14px;\\n font-weight: 700;\\n line-height: 1;\\n text-align: center;\\n user-select: none;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bfc8e8cd-d97d-411e-8804-18cc956a0acf","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Knob Base State\n","styles":{"bold":true}},{"type":"text","text":"The knob starts on the left side. It is vertically centered using ","styles":{}},{"type":"text","text":"top: 50%","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"translateY(-50%)","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"aa72fced-25e4-417e-b46a-0eebe92930b0","type":"procode","props":{"code":".play-switch__knob {\n position: absolute;\n top: 50%;\n left: var(--gap);\n width: var(--knob-size);\n height: var(--knob-size);\n border-radius: 50%;\n background: #ffffff;\n transform: translateY(-50%) translateX(0) rotate(0deg);\n transition:\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\n outline 0.25s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"z507dk68r\",\"name\":\"code\",\"code\":\".play-switch__knob {\\n position: absolute;\\n top: 50%;\\n left: var(--gap);\\n width: var(--knob-size);\\n height: var(--knob-size);\\n border-radius: 50%;\\n background: #ffffff;\\n transform: translateY(-50%) translateX(0) rotate(0deg);\\n transition:\\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\\n outline 0.25s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73381527-2af4-48d4-9712-5a86300c2905","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Play Icon\n","styles":{"bold":true}},{"type":"text","text":"The icon is centered inside the white knob using CSS Grid.","styles":{}}],"children":[]},{"id":"c1f9896c-3926-4d85-95af-467c54db41b9","type":"procode","props":{"code":".play-switch__icon {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n color: #313033;\n line-height: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"9qapnllj6\",\"name\":\"code\",\"code\":\".play-switch__icon {\\n position: absolute;\\n inset: 0;\\n display: grid;\\n place-items: center;\\n color: #313033;\\n line-height: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e100d529-d912-4d25-8c20-5efbc539e924","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Track State\n","styles":{"bold":true}},{"type":"text","text":"When the checkbox is checked, the track background changes from dark gray to purple.","styles":{}}],"children":[]},{"id":"33109b74-59ab-4e29-a4f7-a76dffb8ee87","type":"procode","props":{"code":".play-switch__input:checked + .play-switch__track {\n background: #8a5cd4;\n}","language":"javascript","filename":"","files":"[{\"id\":\"bu409k4gu\",\"name\":\"code\",\"code\":\".play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd66787d-8a55-41c7-8405-98595157a8a7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Text Position\n","styles":{"bold":true}},{"type":"text","text":"When checked, the text shifts to the left side to make space for the knob on the right.","styles":{}}],"children":[]},{"id":"96b0e934-a1d4-4688-ac36-e7adb063e369","type":"procode","props":{"code":".play-switch__input:checked + .play-switch__track .play-switch__text {\n left: 16px;\n right: 48px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"5jibbxou3\",\"name\":\"code\",\"code\":\".play-switch__input:checked + .play-switch__track .play-switch__text {\\n left: 16px;\\n right: 48px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e9e6584-246f-48c9-8ed2-7d5caef5524f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checked Knob Movement\n","styles":{"bold":true}},{"type":"text","text":"The knob moves to the right using ","styles":{}},{"type":"text","text":"translateX()","styles":{"code":true}},{"type":"text","text":". The distance is calculated from the track width, knob size, and gap.","styles":{}}],"children":[]},{"id":"a6d1c6af-9be2-40da-8a42-ecf889e03b10","type":"procode","props":{"code":".play-switch__input:checked + .play-switch__track .play-switch__knob {\n transform: translateY(-50%)\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\n rotate(360deg);\n outline: 5px solid rgba(255, 255, 255, 0.25);\n}","language":"javascript","filename":"","files":"[{\"id\":\"npcmvbu11\",\"name\":\"code\",\"code\":\".play-switch__input:checked + .play-switch__track .play-switch__knob {\\n transform: translateY(-50%)\\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\\n rotate(360deg);\\n outline: 5px solid rgba(255, 255, 255, 0.25);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca0a2ab4-63e9-4743-a5aa-430a65c15aed","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code\n","styles":{"bold":true}},{"type":"text","text":"This is the main switch logic. The checked input changes the track color, moves the text, and slides the knob to the right.","styles":{}}],"children":[]},{"id":"d4b9f899-d466-4a2e-bb4c-d3cc7cc6fd3c","type":"procode","props":{"code":".play-switch__input:checked + .play-switch__track {\n background: #8a5cd4;\n}\n\n.play-switch__input:checked + .play-switch__track .play-switch__text {\n left: 16px;\n right: 48px;\n}\n\n.play-switch__input:checked + .play-switch__track .play-switch__knob {\n transform: translateY(-50%)\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\n rotate(360deg);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dp5gmyfz0\",\"name\":\"code\",\"code\":\".play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__text {\\n left: 16px;\\n right: 48px;\\n}\\n\\n.play-switch__input:checked + .play-switch__track .play-switch__knob {\\n transform: translateY(-50%)\\n translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\\n rotate(360deg);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2e5f1ca-02e3-4c05-8e75-757c5d149c12","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why ","styles":{"bold":true}},{"type":"text","text":"+ .play-switch__track","styles":{"code":true}},{"type":"text","text":" Works\n","styles":{"bold":true}},{"type":"text","text":"The track comes directly after the checkbox input in the HTML. Because of that, CSS can use the adjacent sibling selector ","styles":{}},{"type":"text","text":"+","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4419012e-087b-4551-90c2-98fc4dac4005","type":"procode","props":{"code":"\n\n\n ...\n","language":"javascript","filename":"","files":"[{\"id\":\"ahm7outzi\",\"name\":\"code\",\"code\":\"\\n\\n\\n ...\\n\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"927bdf27-b280-4b82-bd04-7ea8a76cb93b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Why The Knob Uses ","styles":{"bold":true}},{"type":"text","text":"calc()\n","styles":{"code":true}},{"type":"text","text":"The knob movement needs to stop inside the track. The formula subtracts the knob size and two gaps from the total track width.","styles":{}}],"children":[]},{"id":"f9604c29-e5a7-449c-bd0e-99e374a44487","type":"procode","props":{"code":"translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))","language":"javascript","filename":"","files":"[{\"id\":\"k67gnvy88\",\"name\":\"code\",\"code\":\"translateX(calc(var(--track-width) - var(--knob-size) - (var(--gap) * 2)))\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6c3679cf-c84e-4681-9da1-57fc851d92fd","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The track background uses ","styles":{}},{"type":"text","text":"0.35s","styles":{"code":true}},{"type":"text","text":", the text position uses ","styles":{}},{"type":"text","text":"0.35s","styles":{"code":true}},{"type":"text","text":", and the knob movement uses ","styles":{}},{"type":"text","text":"0.42s","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8b7d0cdd-4a16-4275-a5da-6010cd259444","type":"procode","props":{"code":".play-switch__track {\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.play-switch__text {\n transition:\n left 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n right 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.play-switch__knob {\n transition:\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\n outline 0.25s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"at150s1u0\",\"name\":\"code\",\"code\":\".play-switch__track {\\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__text {\\n transition:\\n left 0.35s cubic-bezier(0.22, 1, 0.36, 1),\\n right 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\\n\\n.play-switch__knob {\\n transition:\\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\\n outline 0.25s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db310549-95dc-4444-bf13-7e6074f7b214","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"If the user prefers reduced motion, all switch transitions are removed.","styles":{}}],"children":[]},{"id":"7bba4856-6651-495f-a380-99e453dc3705","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .play-switch__track,\n .play-switch__text,\n .play-switch__knob {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"cpmccdxbt\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .play-switch__track,\\n .play-switch__text,\\n .play-switch__knob {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"20292494-e20b-4c65-bb67-430d682fa265","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change the knob movement speed here:","styles":{}}],"children":[]},{"id":"d450b965-ee54-4ea9-a78b-2b5fb071b001","type":"procode","props":{"code":".play-switch__knob {\n transition:\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\n outline 0.25s ease;\n}","language":"javascript","filename":"","files":"[{\"id\":\"6y22tlla8\",\"name\":\"code\",\"code\":\".play-switch__knob {\\n transition:\\n transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),\\n outline 0.25s ease;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"40d4afd7-0a3e-4ea8-bdb2-4ebffb24c27c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the track color speed here:","styles":{}}],"children":[]},{"id":"5896f665-a5b3-4a79-a61c-45c5de0ce95c","type":"procode","props":{"code":".play-switch__track {\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}","language":"javascript","filename":"","files":"[{\"id\":\"dom7tnge6\",\"name\":\"code\",\"code\":\".play-switch__track {\\n transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93ee3589-b210-4fc8-bdc6-11f8b8a4a086","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the unchecked track color here:","styles":{}}],"children":[]},{"id":"37b659e1-eb5f-4c34-8e8b-1a0bb4732c6d","type":"procode","props":{"code":".play-switch__track {\n background: #313033;\n}","language":"javascript","filename":"","files":"[{\"id\":\"sgfzzn9o5\",\"name\":\"code\",\"code\":\".play-switch__track {\\n background: #313033;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a72556b7-3fe2-417d-bcb9-c9bb95d35854","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the checked track color here:","styles":{}}],"children":[]},{"id":"10d9ead7-5cc0-47f8-8c1e-a2f68e768af8","type":"procode","props":{"code":".play-switch__input:checked + .play-switch__track {\n background: #8a5cd4;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ka0d85j2r\",\"name\":\"code\",\"code\":\".play-switch__input:checked + .play-switch__track {\\n background: #8a5cd4;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e9eef0cb-f1e2-4ffd-9b73-721a1a1d43c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the knob color here:","styles":{}}],"children":[]},{"id":"82f27b2e-b213-40d1-a0a4-684a1c1d06af","type":"procode","props":{"code":".play-switch__knob {\n background: #ffffff;\n}","language":"javascript","filename":"","files":"[{\"id\":\"44p5rkrcc\",\"name\":\"code\",\"code\":\".play-switch__knob {\\n background: #ffffff;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8fe668f2-46cd-4d43-b3fe-cea40c9d4937","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Size / Shape\n","styles":{"bold":true}},{"type":"text","text":"Change the full switch size here:","styles":{}}],"children":[]},{"id":"3f1497ff-21d5-44d8-b227-9c2225e00ca7","type":"procode","props":{"code":".play-switch {\n --track-width: 130px;\n --track-height: 42px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"sa8xwkhwn\",\"name\":\"code\",\"code\":\".play-switch {\\n --track-width: 130px;\\n --track-height: 42px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"be5e2772-c790-41e4-95fe-18bf7597fb10","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the knob size here:","styles":{}}],"children":[]},{"id":"06728527-1d59-4193-8eaf-203bc8455c06","type":"procode","props":{"code":".play-switch {\n --knob-size: 36px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dpnzjnpuu\",\"name\":\"code\",\"code\":\".play-switch {\\n --knob-size: 36px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"899249b1-d7f7-4b75-acdf-3e0d54a9bbbb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the edge gap here:","styles":{}}],"children":[]},{"id":"2b94d99a-c07d-429a-9077-fdea79a0cb6c","type":"procode","props":{"code":".play-switch {\n --gap: 3px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"lo6qrvrcn\",\"name\":\"code\",\"code\":\".play-switch {\\n --gap: 3px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1e9d34bd-5c40-4c1f-85cb-ebc4bc058134","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the label text inside ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"a2420a32-fbc8-4cb5-8751-521bb8c743f3","type":"procode","props":{"code":"Play","language":"javascript","filename":"","files":"[{\"id\":\"u5wwlhjc6\",\"name\":\"code\",\"code\":\"Play\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f55e397a-a6ea-4de1-96bb-a63955261fb7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon / Content\n","styles":{"bold":true}},{"type":"text","text":"The icon is an inline SVG play icon.","styles":{}}],"children":[]},{"id":"35739729-244b-4757-9788-f021f3dee303","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"w9f6ug4fr\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5a9ae024-739c-4b4c-b044-c1d09c05ef25","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]