md`# Non-Linear Sliders`
arr
function nonlinear_factor_sliders(config = {}) {
let {
values = [],
size = 10,
magnitude = 1,
base = 10,
step = 0.02,
labels = [],
value = 0,
show_percentages = 1,
title
} = typeof config === "number" ? { value: config } : config;
let formTemplate = `<form>`;
if (title) {
formTemplate += `<h2>${title}</h2>`;
}
for (let i = 0; i < size; i++) {
let n = "f" + i;
formTemplate += `<input type=range name=${n} min=${-magnitude} max=${magnitude} step=${step} value=${
values[i] == undefined ? 0 : values[i]
}><label id="${n}" for=${n}></label> ${labels[i] || ""}<br/>`;
}
formTemplate += `</form>`;
return (function() {
const form = html`${formTemplate}`;
form.oninput = () => {
let a = [];
for (let i = 0; i < size; i++) {
let n = "f" + i;
let linear_input = form[n].valueAsNumber;
let nonlinear = base ** linear_input;
if (show_percentages) {
form.children.namedItem(n).innerText = `${(100 * nonlinear).toFixed(
1
)} %`;
}
a.push(nonlinear);
}
form.value = a;
return form.value;
};
form.oninput();
return form;
})();
}
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.
