30:Tb7d,md` ~~~js function slider({ ~~~ ~~~js min: 0, max: 1, step: 0.1, value: 0.5, // initial value title: 'some title', desc: 'some description', ~~~ **[element]** For the next two arguments, replace [element] with one of the following: [title, slider, output, desc, div *(element that ties the others together)*]. ~~~js [element]Style: { width: '150px', color: 'white', ... // other CSS styles }, [element]Attrs: { id: 'slider1', class: 'cool-slider', ... // other attributes }, ~~~

**theme** ~~~js theme: 'white-round', ~~~ Choose one from [default, white]. You can change the slider's thumb appearance by adding -thin or -round to the theme, e.g. white-round.

**background** ~~~js background: { type: 'progress', colors: [yourColors] }, ~~~ type: one of [normal, double, interpolate, progress] ~~~js if (type === 'normal') use color: yourColor instead of colors: [yourColors] ~~~ ~~~js if (type === 'progress') use a list of three colors – starting one, final one and optional right-most solid color (see color-incrementing-slider) ~~~ ~~~js if (type === 'interpolate') use a list of two colors (left and right) or completely omit colors argument and use some d3 color interpolator (see gradient–fade background) ~~~

**highlight** ~~~js highlight: { lower: 60, upper: 90, colors: { normal: '#EDEDED', inactive: '#B7E5C6', active: '#7EE5A0' }, preventUpdate: false }, ~~~ If preventUpdate is set to true, then the slider won't be updated when inside of highlighted area *(see restricted slider)*.

~~~js initialize: true, // if false, oninput won't be triggered when slider is created ~~~

**oninput** ~~~js oninput: (objs) => { // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\ } ~~~ objs object holds title, slider, output, desc, and div elements. Additionally, you have an access to current value of the slider (objs.value), progress [0-1] (objs.progress) and settings (objs.settings), so you can access the min and max values for example (objs.settings.min, objs.settings.max). You can also change the behavior of slider by using div's update method *(which also updates the div's value and output text)*, for example by using objs.div.update(objs.settings.max - objs.slider.value) to create a *tricky slider.* ~~~js }) ~~~

**DOM interactions** div also holds the *min*, *max* and *step* attributes which can be accessed from outside of the slider. ~~~js const mySlider = slider({ min: 0, max: 1, step: 0.1 }); mySlider.min // 0 mySlider.max // 1 mySlider.step // 0.1 ~~~`31:T4e6,md` ~~~js function select({ ~~~ **options** ~~~js options: { option1: value1, option2: value2, ... }, ~~~ Either dict or list, e.g. ['a', 'b', 'c'] will become {'a': 'a', 'b': 'b', 'c': 'c'}.

~~~js selected: option1, // initially selected option title: 'some title', desc: 'some description', ~~~

**[element]** For the next two arguments, replace [element] with one of the following: [title, select, additionalElement (caret), desc, div *(element that ties the others together)*]. ~~~js [element]Style: { width: '150px', color: 'white', ... // other CSS styles }, [element]Attrs: { id: 'select1', cla‎ss: 'cool-select', ... // other attributes }, ~~~

~~~js theme: 'white', // one of [default, white], initialize: true, // if false, onchange won't be triggered when input is created ~~~

**onchange** ~~~js onchange: (objs) => { // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\ } ~~~ objs object holds title, button, desc, additionalElement (caret), div elements. You can also update the select's value by using objs.div.update method. ~~~js }) ~~~ `32:T54c,html` ${button({ title: "🐟", value: "JUST", divStyle: { display: "inline-block" }, buttonStyle: { background: "#CCE9FF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FIN..."; d3.select(button) .style("background", "#B2DFFF") .interrupt() .transition() .duration(300) .style("background", "#CCE9FF"); } })} ${button({ title: "🐬🐬", value: "KEEP", divStyle: { display: "inline-block", "margin-left": "5px" }, buttonStyle: { background: "#B2DFFF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FINDING..."; d3.select(button) .style("background", "#99D4FF") .interrupt() .transition() .duration(300) .style("background", "#B2DFFF"); } })} ${button({ title: "🐠🐠🐠", value: "SWIMMING", divStyle: { display: "inline-block", "margin-left": "5px" }, buttonStyle: { background: "#99D4FF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FINDING NEMO"; d3.select(button) .style("background", "#7FC9FF") .interrupt() .transition() .duration(300) .style("background", "#99D4FF"); } })} `33:T96e,input = (settings = {}, type) => { if (typeof settings !== "object") { return "Please provide a value!"; } const theme = settings.theme ?? "default"; const initialize = settings.initialize ?? type !== "button"; const on = onTypes[type]; setGlobalStyles(theme); const objs = { title: createElement("title", settings.title, theme, settings), desc: createElement("desc", settings.desc, theme, settings), output: type === "slider" ? createElement("output", settings.value, theme, settings) : type == "checkbox" ? createElement("output", settings.label, theme, settings) : "", settings, value: settings.value }; objs.additionalElement = settings.additionalElement ? createElement( settings.additionalElement.name, settings.additionalElement.value, theme, settings ) : ""; (objs[type] = createElement(type, settings.value, theme, settings)), (objs.div = createElement( "div", [objs.title, objs[type], objs.output, objs.additionalElement, objs.desc], theme, settings )); if (type === "slider") { objs.div.min = settings.min; objs.div.max = settings.max; objs.div.step = settings.step; } objs[type][on] = () => { if (!settings.preventUpdate) { objs.div.update(); } if (type === "slider") objs.progress = (objs.value - settings.min) / (settings.max - settings.min); if (settings.utilities) { for (let [key, func] of Object.entries(settings.utilities)) { func(settings[key], objs); } } if (settings[on]) settings[on](objs); }; objs.div.update = (value = objs[type].value || settings.value) => { value = isNaN(value) ? value : +value; if (type === "checkbox" && objs.value !== false) { value = false; } else if (type === "checkbox") { value = settings.value; } objs.value = value; if (type !== "select") { objs[type].value = value; } objs.div.value = objs.value; if (type !== "checkbox" && objs.output) { objs.output.textContent = objs.value; } objs.div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (settings.preventUpdate) objs.div.update(); if (initialize) { objs[type][on](); } else if (!settings.preventUpdate) { objs.div.update(); } return objs.div; }34:T670,createElement = (type, text = "", theme = "", settings = "") => { if (text == undefined) return ""; text = type != "slider" && type != "checkbox" ? text : ""; let typesMapping = { title: { tag: "div", mandatoryAttrs: { class: "diy-title" } }, button: { tag: "button", mandatoryAttrs: {} }, checkbox: { tag: "input", mandatoryAttrs: { type: "checkbox", value: settings.value } }, select: { tag: "select", mandatoryAttrs: {} }, slider: { tag: "input", mandatoryAttrs: { type: "range", min: settings.min, max: settings.max, step: settings.step, value: settings.value } }, output: { tag: "span", mandatoryAttrs: { class: "diy-output" } }, desc: { tag: "div", mandatoryAttrs: { class: "diy-desc" } }, div: { tag: "div", mandatoryAttrs: { class: `input-${theme}` } }, caret: { tag: "svg", mandatoryAttrs: { class: "diy-caret" } } }; let el = html`<${typesMapping[type].tag}>${text}`; Object.entries(typesMapping[type].mandatoryAttrs).forEach((d) => el.setAttribute(d[0], d[1]) ); if (typeof settings[type + "Attrs"] == "object") Object.entries(settings[type + "Attrs"]).forEach((d) => { if (d[0] == "class") el.classList.add(d[1]); else el.setAttribute(d[0], d[1]); }); if (typeof settings[type + "Style"] == "object") Object.entries(settings[type + "Style"]).forEach( (d) => (el.style[d[0]] = d[1]) ); return el; }35:T490,highlightSlider = (settings, objs) => { settings.lowerAdj = (100 * (settings.lower - objs.settings.min)) / (objs.settings.max - objs.settings.min); settings.upperAdj = (100 * (settings.upper - objs.settings.min)) / (objs.settings.max - objs.settings.min); if (settings.preventUpdate) objs.settings.preventUpdate = true; if ( +objs.slider.value == settings.lower || +objs.slider.value == settings.upper ) { objs.div.update(objs.slider.value); } if ( +objs.slider.value < settings.lower || +objs.slider.value > settings.upper ) { objs.div.update(objs.slider.value); objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } else { objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } }36:T444,setSliderBackground = (settings, objs) => { let type = settings.type, color = settings.color, colors = settings.colors, progress = objs.progress, interpolation = settings.interpolation, custom = false; if (!interpolation) interpolation = d3.interpolate; else custom = true; type == "normal" ? (objs.slider.style.background = color) : type == "double" ? (objs.slider.style.background = `linear-gradient(90deg, ${colors[0]} ${ progress * 100 }%, ${colors[1]} 0%)`) : type == "interpolate" ? (objs.slider.style.background = custom ? interpolation(progress) : interpolation(colors[0], colors[1])(progress)) : type == "progress" ? custom ? (objs.slider.style.background = `linear-gradient(90deg, ${interpolation( progress )} ${progress * 100}%, ${color || interpolation(0)} 0%)`) : (objs.slider.style.background = `linear-gradient(90deg, ${interpolation( colors[0], colors[1] )(progress)} ${progress * 100}%, ${colors[2] || colors[0]} 0%)`) : 0; }37:Tafa,themes = ` .input-default button, .input-white button, .input-default select, .input-white select { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0.9; height: 30px; margin-left: 0px; padding: 5px 10px 5px 10px; background: #EFEFEF; border: 0.5px solid white; border-radius: 5px; color: #262626; font-family: Avenir, Arial; font-size: 12px; font-weight: 600; cursor: pointer; } .input-white button, .input-white select { color: white; } .input-default select, .input-white select { padding-right: 29px; } .input-default .diy-caret, .input-white .diy-caret { width: 12px; height: 10px; margin-left: -24px; fill: black; pointer-events: none; opacity: 0.75; } .input-white .diy-caret { fill: white; } .input-default input[type = 'range'], .input-default-thin input[type = 'range'], .input-default-round input[type = 'range'], .input-white input[type = 'range'], .input-white-thin input[type = 'range'], .input-white-round input[type = 'range'] { appearance: none; -webkit-appearance: none; width: 200px; height: 5px; border-radius: 1px; background: #E5E5E5; } .input-default input[type = 'range']::-webkit-slider-thumb, .input-white input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 5px; } .input-white input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-thin input[type = 'range']::-webkit-slider-thumb, .input-white-thin input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7.5px; height: 20px; background: #545454; cursor: pointer; border: none; border-radius: 2.5px; } .input-white-thin input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-round input[type = 'range']::-webkit-slider-thumb, .input-white-round input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 7.5px; } .input-white-round input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } input[type = 'range']:focus { outline: none; } .diy-output { margin-left: 5px; color: #262626; font-family: Courier; font-size: 14px; } .diy-title { margin-bottom: 3.5px; margin-left: 2.5px; color: black; font-family: Avenir, Arial; font-size: 14px; font-weight: 600; } .diy-desc { margin-top: 6px; margin-left: 2.5px; color: #4C4C4C; font-family: Avenir, Arial; font-size: 12px; } `38:[] 2e:{"title":"DIY inputs","cells":[{"id":0,"value":"md`# DIY inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`*Inspired by [jashkenas' inputs.]*\n[jashkenas' inputs.]: https://observablehq.com/@jashkenas/inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2296,"value":"md`---\nWelcome to the toolbo... notebook of easily customizable inputs! It serves as a list of examples, to showcase what's possible to achieve. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2402,"value":"md`I decided to create a tool – instead of a set of predefined functionalities – that can be used to create fantastic inputs with just a little doze of creativity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"md`Have fun! 🎢`","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"md`---\n## Sliders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"md`\n~~~js\nimport { slider } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"slider({\n title: \"HOW-ARE-YOU-TODAY SLIDER\",\n desc: \"TOOLTIP.\",\n descStyle: {\n \"margin-top\": 0,\n \"text-anchor\": \"middle\"\n },\n min: 0,\n max: 100,\n step: 1,\n value: 75,\n theme: \"white-round\",\n background: {\n type: \"double\",\n colors: [\"#7EE5A0\", \"#FFA5A5\"]\n },\n oninput: ({ desc, output, value, progress }) => {\n output.textContent =\n value < 10\n ? \"😭\"\n : value < 30\n ? \"☹️\"\n : value < 50\n ? \"😐\"\n : value < 70\n ? \"🙂\"\n : value < 90\n ? \"😄\"\n : value < 99\n ? \"🥳\"\n : \"💯\";\n\n desc.textContent = `${value}%`;\n\n // tooltip's position: (200px - margins) + exceptions for one- and three-number percentages\n desc.style.marginLeft = `${\n progress * (200 - 15) + (value < 10 ? 5 : value === 100 ? -5 : 0)\n }px`;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"slider({\n title: \"LIGHTSABER SLIDER\",\n desc: \"MAY THE FORCE BE WITH YOU.\",\n min: 0,\n max: 100,\n step: 1,\n value: 15,\n theme: \"default-thin\",\n background: {\n type: \"double\",\n colors: [\"#7295FF\", \"#CCD8FF\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"slider({\n title: \"ONLY-LEFT-COLOR SLIDER\",\n desc: \"SO LEFT-SIDED.\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n theme: \"default-round\",\n background: {\n type: \"double\",\n colors: [\"#7295FF\", \"white\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"slider({\n title: \"ONLY-RIGHT-COLOR SLIDER\",\n desc: \"SO OPPOSITE-SIDED.\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n theme: \"white-round\",\n background: {\n type: \"double\",\n colors: [\"white\", \"#7295FF\"]\n },\n oninput: ({ output }) => (output.textContent = \"🤔\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"slider({\n title: \"COLOR-INCREMENTING SLIDER\",\n desc: \"SO MAJESTIC.\",\n min: 0,\n max: 100,\n step: 1,\n value: 20,\n theme: \"default\",\n background: {\n type: \"progress\",\n colors: [\"#CCD8FF\", \"#7295FF\", \"white\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"slider({\n title: \"GRADIENT-FADE BACKGROUND SLIDER\",\n desc: \"SO MANY COLORS.\",\n min: 0,\n max: 100,\n step: 1,\n value: 80,\n theme: \"default-round\",\n background: {\n type: \"interpolate\",\n colors: [\"#FFA5A5\", \"#7EE5A0\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"slider({\n title: \"HIGHLIGHTED SLIDER\",\n desc: \"👨 : - IS IT FINE TO CROSS THE GREEN LINE?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 90,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#B7E5C6\",\n active: \"#7EE5A0\"\n },\n preventUpdate: false\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 90) {\n desc.textContent =\n \"🧝‍♀️ : YES, MY SON. THERE IS A LOT OF INTERESTING THINGS THERE!\";\n } else {\n desc.textContent = \"👨 : IS IT FINE TO CROSS THE GREEN LINE?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"slider({\n title: \"RESTRICTED SLIDER\",\n desc: \"👨 : IS IT FINE TO CROSS THE RED LINE?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 90,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#FFA5A5\",\n active: \"#FF6666\"\n },\n preventUpdate: true\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 90) {\n desc.textContent =\n \"🧝‍♀️ : NO, MY SON. YOU SHOULD ALWAYS KEEP AWAY FROM IT.\";\n } else {\n desc.textContent = \"👨 : IS IT FINE TO CROSS THE RED LINE?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"slider({\n title: \"LOTR-RESTRICTED SLIDER\",\n desc: \"👨 : SHALL I PASS?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 101,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#FFA5A5\",\n active: \"#FF6666\"\n },\n preventUpdate: true\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 101) {\n desc.textContent = \"🧙‍♂️ : YOU SHALL NOT PASS!\";\n } else {\n desc.textContent = \"👾 : SHALL I PASS?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"slider({\n title: \"CUSTOM-DESCRIPTION-AND-OUTPUT SLIDER\",\n descStyle: {\n \"pointer-events\": \"none\"\n },\n min: 0,\n max: 10,\n step: 1,\n value: 0,\n background: {\n type: \"progress\",\n colors: [\"#F2F2F2\", \"#7EE5A0\", \"#F2F2F2\"]\n },\n oninput: ({ desc, output, value }) => {\n output.textContent =\n value === 10\n ? \"Congrats, you did it! 🎉\"\n : \"Only \" + (10 - value) + \" to go!\";\n\n desc.textContent =\n value === 0\n ? \"LET'S COUNT TO 10!\"\n : d3\n .range(value)\n .map((d) => (d == 9 ? d + 1 + \"!\" : d + 1 + \"...\"))\n .reduce((a, b) => a + \" \" + b, \"\");\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"slider({\n title: \"TRICKY SLIDER\",\n desc: \"❌ NEVER TRUST THESE ONES.\",\n min: 0,\n max: 100,\n step: 1,\n theme: \"default-thin\",\n oninput: ({ div: { update }, settings, value }) =>\n update(settings.max - value)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"slider({\n title: \"EXPANDING RAINBOW SLIDER\",\n desc: \"BECAUSE WHY NOT?\",\n min: 0,\n max: 100,\n step: 1,\n value: 20,\n background: {\n type: \"progress\",\n interpolation: d3.interpolateRainbow,\n color: \"#EDEDED\"\n },\n oninput: ({ desc, output, progress, slider, value }) => {\n slider.style.width = `${75 + 0.75 * value + 50 * progress}px`;\n\n if (progress < 1) {\n output.textContent = \"🌈 : Catch me if you can!\";\n desc.textContent = \"BECAUSE WHY NOT?\";\n } else {\n output.textContent = \"🧝‍♀️ : You caught the rainbow. Congratulations!\";\n desc.textContent = \"THE TRUE RAINBOW–CATCHER.\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2048,"value":"md`**Inline sliders.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"md`🧝‍♀️: - Have you seen the Inline-Robo-Candy-Slider 9000?\n
🤖: - D1$@BL1NG $T3@LTH M0D3... ${slider(\n {\n titleStyle: {\n \"font-size\": \"11px\"\n },\n min: 0,\n max: 15,\n step: 1,\n divStyle: {\n display: \"inline-block\",\n \"text-align\": \"center\",\n \"margin-left\": \"3.5px\"\n },\n sliderStyle: {\n width: \"130px\",\n background: \"#FFA5D0\"\n },\n theme: \"default-thin\",\n oninput: ({ value }) =>\n (mutable S0___MANY___CAND13S = Array(value + 1).join(\"🍬\"))\n }\n)}\n
🧝‍♀️: - Ah, there you are!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"mutable S0___MANY___CAND13S = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"md`**Bonus:** synchronized dance-sliders.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"slider({\n desc: \"'CAUSE PARTY IS NEVER OVER.\",\n min: 0,\n max: 100,\n step: 1,\n divAttrs: {\n id: \"slider1\"\n },\n divStyle: {\n display: \"inline-block\"\n },\n sliderStyle: {\n width: \"150px\"\n },\n theme: \"default-round\",\n oninput: ({ output, progress, slider, value }) => {\n const secondSlider = d3.select(\"#slider2\");\n\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - value);\n secondSlider.select(\"input\").node().style.background = d3.interpolateCool(\n 1 - progress\n );\n slider.style.background = d3.interpolateCool(progress);\n\n if (value >= 50) {\n output.textContent = \"💃\";\n secondSlider.select(\"span\").node().textContent = \"🕺\";\n } else {\n output.textContent = \"🕺\";\n secondSlider.select(\"span\").node().textContent = \"💃\";\n }\n } else {\n slider.style.background = d3.interpolateCool(progress);\n output.textContent = \"💃\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1750,"value":"slider({\n desc: \"CHEERS TO THAT!\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n divAttrs: {\n id: \"slider2\"\n },\n divStyle: {\n display: \"inline-block\"\n },\n sliderStyle: {\n width: \"150px\"\n },\n theme: \"default-round\",\n oninput: ({ output, progress, slider, value }) => {\n const secondSlider = d3.select(\"#slider1\");\n\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - value);\n secondSlider.select(\"input\").node().style.background = d3.interpolateCool(\n 1 - progress\n );\n slider.style.background = d3.interpolateCool(progress);\n\n if (value <= 50) {\n output.textContent = \"🕺\";\n secondSlider.select(\"span\").node().textContent = \"💃\";\n } else {\n output.textContent = \"💃\";\n secondSlider.select(\"span\").node().textContent = \"🕺\";\n }\n } else {\n slider.style.background = d3.interpolateCool(progress);\n output.textContent = \"🕺\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2923,"value":"md`---\n## Selects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2926,"value":"md`~~~js\nimport { select } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2936,"value":"select({\n title: \"JUMPING SELECT\",\n desc: \"AAAAND HOP!\",\n options: {\n GREEN: \"#A1E8CC\",\n APRICOT: \"#FAC9B8\",\n BLUE: \"#BFD4FF\"\n },\n selectStyle: {\n background: \"#A1E8CC\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"35px\")\n .style(\"margin\", \"15px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"margin\", \"0px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3187,"value":"select({\n title: \"SHRINKING SELECT\",\n desc: \"AAAAND SHRINK!\",\n options: {\n APRICOT: \"#FAC9B8\",\n GREEN: \"#A1E8CC\",\n BLUE: \"#BFD4FF\"\n },\n selectStyle: {\n background: \"#FAC9B8\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(250)\n .style(\"width\", \"10px\")\n .style(\"height\", \"90px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3211,"value":"select({\n title: \"MY-FATHER-WAS-A-CIRCLE SELECT\",\n desc: \"NO JOKES.\",\n options: {\n BLUE: \"#BFD4FF\",\n GREEN: \"#A1E8CC\",\n APRICOT: \"#FAC9B8\"\n },\n selectStyle: {\n background: \"#BFD4FF\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(350)\n .style(\"width\", \"100px\")\n .style(\"height\", \"100px\")\n .style(\"border-radius\", \"50px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"border-radius\", \"5px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3251,"value":"select({\n title: \"SPINNING SELECT\",\n desc: \"LET'S ROLL!\",\n options: {\n I: \"SPIN\",\n LIKE: \"TO\",\n TOOOOO: \"LIKE\",\n SPIN: \"I\"\n },\n selectStyle: {\n background: \"#FF72AF\"\n },\n divStyle: {\n width: \"160px\",\n \"font-size\": \"1px\"\n },\n theme: \"white\",\n onchange: ({ div }) =>\n d3\n .select(div)\n .transition()\n .duration(250)\n .style(\"transform\", `rotate(300deg)`)\n .transition()\n .ease(d3.easeBounce)\n .duration(750)\n .style(\"transform\", `rotate(0deg)`)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3359,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3363,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"md`---\n## Buttons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2805,"value":"md`~~~js\nimport { button } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"button({\n value: \"REGULAR BUTTON\",\n desc: \"SO REGULAR.\",\n buttonStyle: {\n background: \"#7EE5A0\",\n color: \"#1A1A26\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"button({\n value: \"PRESS-VISIBLE BUTTON\",\n desc: \"SO CLICKY.\",\n buttonStyle: {\n background: \"#6B6B99\",\n color: \"white\"\n },\n onclick: ({ button }) =>\n d3\n .select(button)\n .style(\"background\", \"#505072\")\n .interrupt()\n .transition()\n .duration(300)\n .style(\"background\", \"#6B6B99\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2071,"value":"button({\n title: \"COUNTER-IMITATING BUTTON\",\n value: \"CLICK ME!\",\n desc: \"SO MANY CLICKS...\",\n buttonStyle: {\n background: \"#7295FF\",\n color: \"white\"\n },\n onclick: (objs) => {\n mutable count += 1;\n\n d3.select(objs.button)\n .style(\"background\", \"#6786E5\")\n .interrupt()\n .transition()\n .duration(300)\n .style(\"background\", \"#7295FF\");\n\n if (mutable count > 0 && objs.output === \"\") {\n objs.output = d3\n .select(objs.div)\n .insert(\"a\", \"div.desc\")\n .attr(\"class\", \"output\")\n .style(\"margin-left\", \"5px\")\n .style(\"font-size\", \"11px\")\n .style(\"cursor\", \"pointer\")\n .style(\"border\", \"0.5px solid black\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\", \"5px\")\n .on(\"click\", function () {\n this.remove();\n objs.output = \"\";\n mutable count = 0;\n })\n .html(\"RESET\");\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"mutable count = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"md`**Inline buttons.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2306,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2342,"value":"mutable guessTheMovie = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"md`**Bonus:** single-use button. Click only after a careful consideration!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"viewof singleUseButton = button({\n value: \"YOCO*!\",\n buttonStyle: {\n background: \"#F4ED47\",\n \"font-weight\": 600,\n width: \"70px\",\n height: \"70px\",\n border: \"1px solid black\",\n \"border-radius\": \"50%\"\n },\n divStyle: {\n width: \"125px\",\n \"text-align\": \"center\"\n },\n onclick: ({ button, div }) =>\n d3\n .select(button)\n .transition()\n .duration(400)\n .style(\"width\", \"0px\")\n .style(\"height\", \"0px\")\n .style(\"font-size\", \"0px\")\n .style(\"opacity\", 0)\n .on(\"end\", () => {\n div.update(\"it was nice to meet yooooou...\");\n div.remove();\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"md`Button says: **${singleUseButton}**\n\n*You Only Click Once.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2900,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2903,"value":"md`\n~~~js\nfunction button({\n~~~\n~~~js\n value: \"button's label\",\n title: 'some title',\n desc: 'some description',\n~~~\n

\n**[element]**\n\nFor the next two arguments, replace [element] with one of the following: [title, button, desc, div *(element that ties the others together)*].\n~~~js\n [element]Style: {\n width: '150px',\n color: 'white',\n ... // other CSS styles\n },\n [element]Attrs: {\n id: 'button1',\n class: 'cool-button',\n ... // other attributes\n },\n~~~\n

\n~~~js\n theme: 'white', // one of [default, white]\n initialize: false, // if true, onclick will be triggered when input is created\n~~~\n

\n**onclick**\n\n~~~js\n onclick: (objs) => {\n // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\\\\\\n }\n~~~\nobjs object holds title, button, desc, div elements. You can also update the button's value by using objs.div.update method.\n\nCheck the code of the examples above, to see how you can use all of them!\n~~~js\n})\n~~~ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3408,"value":"md`If you have any thoughts or suggestions please leave a comment or fork this notebook!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"md`---\n### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"button = (settings = {}) => {\n if (typeof settings == \"string\") {\n return input({ value: settings }, \"button\");\n } else {\n return input(settings, \"button\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3469,"value":"checkbox = (settings = {}) => {\n if (typeof settings == \"string\") {\n return input({ value: settings }, \"checkbox\");\n } else {\n return input(settings, \"checkbox\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2931,"value":"select = (settings = {}) => {\n if (\n typeof settings.options != \"object\" ||\n Object.keys(settings.options).length == 0\n ) {\n return \"Please provide at least one option!\";\n }\n\n if (Array.isArray(settings.options)) {\n settings.options = settings.options.reduce(\n (obj, key) => Object.assign(obj, { [key]: key }),\n {}\n );\n }\n\n let options = \"\";\n for (let [key, value] of Object.entries(settings.options)) {\n options += ``;\n }\n\n settings.value = options;\n settings.additionalElement = {\n name: \"caret\",\n value: ``\n };\n\n return input(settings, \"select\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"slider = (settings = {}) => {\n settings.min =\n settings.min == undefined ? settings.max - 1 || 0 : settings.min;\n settings.max =\n settings.max == undefined ? settings.min + 1 || 1 : settings.max;\n settings.value =\n settings.value == undefined\n ? (settings.min + settings.max) / 2\n : settings.value;\n settings.step =\n settings.step ||\n (settings.max > settings.min\n ? (settings.max - settings.min) / 10\n : (settings.min - settings.max) / 10) ||\n 0.1;\n\n settings.utilities = {};\n\n if (settings.background) {\n settings.utilities.background = setSliderBackground;\n }\n\n if (settings.highlight) {\n settings.utilities.highlight = highlightSlider;\n }\n\n return input(settings, \"slider\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3839,"value":"onTypes = ({\n button: \"onclick\",\n checkox: \"oninput\",\n select: \"onchange\",\n slider: \"oninput\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"setGlobalStyles = function (style) {\n d3.selectAll(\".inputStyles\")\n .data([style])\n .enter()\n .append(\"style\")\n .attr(\"class\", \"inputStyles\")\n .html(themes);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`---\n### CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}