31: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; } 32: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" } 33:[] 2f:{"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"},{"id":40,"value":"aMultiInput","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3format = require(\"d3-format@1\")\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`\nusing ideas from {input} from \"@jashkenas/inputs\" and set_value from \"@severo/inputs-setter\"`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`### Versions\n\n* Jan 27, 2021. Change from \\`