21:null 22:["$","title",null,{"children":"Slider with number input box and quick-select buttons | chonghorizons | Observable"}] 27:T15d6,function sliderBoxButtons(config = {}) { let { form, action, min = 0, max = 100, sliderMax = 100, value = (max + min) / 2, step = "any", precision = 2, attributes = {}, title, description, disabled, getValue, format, display, submit, type, } = typeof config === "number" ? { value: config } : config; precision = Math.pow(10, precision); const defaultValue=value; // set at the start/instantiation, not changed. // NOTE: Only min, max, step, and precision have been added to the inputs. If you want other input parameters, please fork and add them yourself. // precision only affect the inputs the slider. It's not enforced for the number entry // step is enforced for both, but not for the setValue method and double/half buttons. const wrapper = html`

`; form = html`

`; const range = form.querySelector("[type=range]"); const number = form.querySelector("[type=number]"); // console.log("asfsfsa5153096") // console.log(value); form.value = range.value = number.value = value // console.log(range.oninput) range.oninput = function() { number.value = form.value = range.valueAsNumber; return number.value; } console.log(range.oninput) number.oninput = function() { if (number.valueAsNumber > max) { // sets slider at the maximum, which visually sorta makes sense. range.value=sliderMax; form.value=number.value=max; return form.value; } if (number.valueAsNumber > sliderMax) { // sets slider at the maximum, which visually sorta makes sense. range.value=sliderMax; form.value=number.valueAsNumber; return form.value; } else { range.value = form.value = number.valueAsNumber; } } // a lot of this stuff is copied from @jashkenas/inputs and @severo/inputs-setter Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); // The number box already works as the output, so output is redundant. // form.append( // html`` // ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); // console.log("40140"); const value = getValue ? getValue(form.input) : form.value; // never reached, since output isn't used // if (form.output) { // // console.log("sf40"); // const out = display ? display(value) : format ? format(value) : value; // if (out instanceof window.Element) { // while (form.output.hasChildNodes()) { // form.output.removeChild(form.output.lastChild); // } // form.output.append(out); // } else { // form.output.value = out; // } // } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; }; form.setValue = function(newValue, { dispatch = true } = {}) { if (newValue > max) { // sets slider at the maximum, which visually sorta makes sense. range.value=sliderMax; form.value=number.value=max; } else if (newValue > sliderMax) { // sets slider at the maximum, which visually sorta makes sense. range.value=sliderMax; form.value=number.valueAsNumber=newValue; } else if (newValue { e.preventDefault(); form.setValue(number.valueAsNumber/2); }; doubleB.onclick = (e) => { e.preventDefault(); form.setValue(number.valueAsNumber*2); }; resetB.onclick = (e) => { e.preventDefault(); form.setValue(defaultValue); }; window.hochohalfB=halfB; console.log(halfB); // I don't understand exactly why this is done, but I copied it from the inputs function while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); // console.log(form); // console.log(form.output); return form; } 28:T65a,/* viewof numberOfPeopleInSpace = { let sliderMax=100 const div = html``; const range = div.querySelector("[type=range]"); const number = div.querySelector("[type=number]"); const halfB = div.querySelector("[name=halfB]"); const doubleB = div.querySelector("[name=doubleB]"); div.value = range.value = number.value = 50 range.oninput = () => number.value = div.value = range.valueAsNumber; number.oninput = () => { if (number.valueAsNumber > sliderMax) { range.value=sliderMax; div.value=number.valueAsNumber; } else { range.value = div.value = number.valueAsNumber; } } halfB.onclick = (e) => { e.preventDefault(); console.log("clicked"); div.setValue(number.valueAsNumber/2); }; doubleB.onclick = (e) => { e.preventDefault(); div.setValue(number.valueAsNumber*2); }; div.setValue = function(newValue, { dispatch = true } = {}) { div.value=range.value=number.value=newValue; // As setting the value property doesn't dispatch an event, I do it with a custom event if (dispatch) { div.dispatchEvent(new CustomEvent("input", { bubbles: true })); } }; return div; } */ { return "See code for an old hard-coded version, doesn't work with viewof" } 29:[] 25:{"id":"8a014e4fb52cfed7","slug":"slider-with-number-input-box-and-quick-select-buttons","title":"Slider with number input box and quick-select buttons","thumbnail":"1c0f889b4ce7a5c4844a3162000585ab54ce3da051708f2c07862a91ae1db20b","access_level":"public","create_time":"$D2021-01-24T05:42:18.801Z","update_time":"$D2021-02-05T20:07:21.009Z","view_time":null,"first_public_time":"$D2021-01-24T17:41:45.144Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"15d587e66f4266d3","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":"starter_2024","bio":""},"version":226,"publish_version":226,"role":null,"authored":false,"authors":[{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null,"bio":""}],"members":[{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null,"role":"editor"}],"comments":[{"id":"f4c5805286055e18","reply_to_id":null,"content":"set to 200 does not work :(","create_time":"$D2021-01-26T17:15:57.975Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}},{"id":"907434631bd0b695","reply_to_id":"f4c5805286055e18","content":"Thanks. I fixed it.","create_time":"$D2021-01-27T19:21:41.572Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f44fea89e21f8c13","login":"chonghorizons","name":"","avatar_url":"https://avatars-next.observableusercontent.com/58f00abac9e09c9bd8b8f4d7fa69299ac7ba47eef711449bf2d55b1b52d740ac","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Slider with number input box and quick-select buttons","cells":[{"id":0,"value":"md`# Slider with number input box and quick-select buttons\n\nUPDATE Feb 5, 2021: There is an easier way to do this as of Feb4: see https://observablehq.com/@observablehq/synchronized-inputs#i\n\nI'm no longer updating this page.\n\n---\n\nI needed something to allow a slider for a range (like 0 to 100), but also a box to allow a specific or larger number in a text box. And I wanted some quick selects for doubling, halving, and resetting.\n\nMany thanks to https://observablehq.com/@jashkenas/inputs and set_value from https://observablehq.com/@severo/inputs-setter and to these https://observablehq.com/@mbostock/linked-inputs and https://observablehq.com/@mbostock/synchronized-views\n\nkeywords: linked inputs, synchronized inputs, synchronized views\n\nSo, I'm sharing my \"multi-input\", sliderBoxButtons. It works with viewof. Here's an example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"aMultiInput","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof aMultiInput = sliderBoxButtons({title: \"The slider and box and buttons all sync up\", description: \"this is the description, accepted range is 0 to 999\", sliderMax: 100, max: 999, value: 20.5, step: 0.1, precision: 1})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`To use this, just copy the following to your notebook:\n\n \\`import { sliderBoxButtons } from \"@chonghorizons/slider-with-number-input-box-and-quick-select-buttons\" \\`\n\nor, copy the code and edit it if you need to customize what the buttons do.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`You can also have separate buttons that are not part of that line, using the setValue`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"{\n const form = html``;\n form.a.onclick = () => {\n viewof aMultiInput.setValue(aMultiInput*3);\n };\n form.b.onclick = () => {\n viewof aMultiInput.setValue(200);\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`Note: I couldn't figure out how to pass a specific function for the button within the viewof statement. For now, if I need to change the button text and behavior, I just hard code it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$27","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3format = require(\"d3-format@1\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`\nusing ideas from {input} from \"@jashkenas/inputs\" and set_value from \"@severo/inputs-setter\"`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`### Versions\n\n* Jan 27, 2021. Change from \\`