Published
Edited
Feb 5, 2021
Importers
3 stars
aMultiInput
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})
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`<div></div>`;
form = html`
<div >
<input type=range min=${min} max=${sliderMax} precision=${precision} step=${step}>
<input type=number min=${min} max=${max} step=${step} style="width:auto;">
<button name=halfB>half</button>
<button name=doubleB>double</button>
<button name=resetB>reset to ${defaultValue}</button>
</div>`;
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`<output name=output style="font: 14px Menlo, Consolas, monospace; margin-left: 0.5em;"></output>`
// );
if (title)
form.prepend(
html`<div style="font: 700 0.9rem sans-serif; margin-bottom: 3px;">${title}</div>`
);
if (description)
form.append(
html`<div style="font-size: 0.85rem; font-style: italic; margin-top: 3px;">${description}</div>`
);
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<min) {
form.value=range.value=number.value=min
}
else {
form.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) {
form.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
};
const halfB = form.querySelector("[name=halfB]"); // the button DOM objects.
const doubleB = form.querySelector("[name=doubleB]");
const resetB = form.querySelector("[name=resetB]");
// prevent accidental enter key issue
halfB.onclick = (e) => {
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;
}
d3format = require("d3-format@1")
md`
using ideas from {input} from "@jashkenas/inputs" and set_value from "@severo/inputs-setter"`
md`### Versions
* Jan 27, 2021. Change from \`<form>\` to \`<div>\` to deal with the enter key firing a form submission.
* Jan 27, 2021. Fixed setvalue logic error. Thanks to @stardisblue for noting the set to 200 wasn't working.
* ~Jan 20, 2021. Original
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
