31:T4ff,ToggleSwitch = ({ labels = ["Gauche", "Droite"], values = ["left", "right"], value = values[0], sliderColor = "#275EFE", textColor = "#444" } = {}) => { const [labelLeft, labelRight] = labels; const [valLeft, valRight] = values; const node = html`

${labelLeft} ${labelRight}

`; const input = node.querySelector("input"); const updateLabels = () => { node.querySelector(".label.left").classList.toggle("active", !input.checked); node.querySelector(".label.right").classList.toggle("active", input.checked); }; Object.defineProperty(node, "value", { get: () => (input.checked ? valRight : valLeft), set: (v) => { input.checked = (v === valRight); updateLabels(); } }); input.addEventListener("change", () => { updateLabels(); node.dispatchEvent(new CustomEvent("input")); }); updateLabels(); return node; }32:[] 2f:{"title":"Sliding radio button","cells":[{"id":0,"value":"# Sliding radio button\n\nA more beautiful radio button designed with ChatGPT help. ","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"toggle ","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof toggle = ToggleSwitch({\n labels: [\"Valeur (€)\", \"Indice\"],\n values: [\"valeur\", \"indice\"],\n value: \"indice\",\n sliderColor: \"#f5d63b\",\n textColor: \"blue\"\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof toggleSimple = ToggleSwitch({\n labels: [\"\", \"Accept\"],\n values: [\"no\", \"yes\"],\n value: \"no\",\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"styleOptions = `\n.toggle-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-family: sans-serif;\n font-size: 14px;\n color: var(--text-color);\n}\n\n.label {\n transition: font-weight 0.2s;\n}\n\n.label.active {\n font-weight: bold;\n}\n\n.toggle-ios {\n position: relative;\n display: inline-block;\n width: 44px;\n height: 24px;\n}\n\n.toggle-ios input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.3s;\n border-radius: 34px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 18px;\n width: 18px;\n left: 3px;\n top: 3px;\n background-color: white;\n transition: 0.3s;\n border-radius: 50%;\n}\n\ninput:checked + .slider {\n background-color: var(--slider-color);\n}\n\ninput:checked + .slider:before {\n transform: translateX(20px);\n}\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}