Software developer and power user
Published
Edited
Feb 6, 2021
viewof nativeSlider = html`<input type="range" min="0" max="1" step="0.01">`
nativeSlider
updateButton = (slider) => {
const button = html`<button>Update</button>`
button.addEventListener("click", () => {
slider.value = Math.random();
slider.dispatchEvent(new CustomEvent("input"));
});
return button;
}
updateButton(viewof nativeSlider)
viewof fancySlider = slider({
title: "Fancy slider",
description: "As a combination of multiple HTML elements within a form"
})
fancySlider
updateButton(viewof fancySlider)
viewof anotherFancySlider = slider()
anotherFancySlider
{
const button = html`<button>Update</button>`;
button.addEventListener("click", () => {
// anotherFancySlider is actually a form, holding an input (i.a.)
viewof anotherFancySlider.input.value = Math.random();
viewof anotherFancySlider.dispatchEvent(new CustomEvent("input"));
});
return button;
}
viewof doublingSlider = {
const secondarySlider = happyCaseSlider({ value: viewof anotherFancySlider.value });
secondarySlider.addEventListener("input", (e) => {
// avoid endless loops
if (e.detail !== "ignore") {
viewof anotherFancySlider.input.value = secondarySlider.value;
viewof anotherFancySlider.dispatchEvent(new CustomEvent("input"));
}
});
viewof anotherFancySlider.addEventListener("input", () => {
secondarySlider.input.value = viewof anotherFancySlider.value;
secondarySlider.dispatchEvent(new CustomEvent("input", { detail: "ignore" }));
});
return secondarySlider;
}
doublingSlider
happyCaseSlider = () =>
happyCaseInput({
type: "range",
attributes: {
min: 0,
max: 1,
step: "any",
value: 0.5
},
getValue: input => Math.round(input.valueAsNumber * 100) / 100
})
function happyCaseInput(config) {
let {
type,
attributes,
getValue
} = config;
// named form elements are accessible as form.name
const form = html`
<form>
<input name="input" type="${type}" />
</form>`;
for (const [key, val] of Object.entries(attributes)) {
form.input.setAttribute(key, val);
}
// inline styles extracted (not feasible for an export-oriented solution)
form.append(html`<output name="output" class="value"></output>`);
const verb = "oninput";
form[verb] = e => {
const value = getValue(form.input);
form.output.value = value;
form.value = value;
};
form[verb]();
return form;
}
viewof lastSlider = customSlider({
title: "Happy case",
value: 0.75,
format: d => `${Math.round(d * 100)}%`,
description: "We are almost there"
})
lastSlider
updateButton(viewof lastSlider)
customSlider = (options = {}) => {
const {
title,
min = 0,
max = 1,
value = (min + max) / 2,
step = "any",
precision = 2,
format,
description
} = options;
const slider = html`<div class="slider"></div>`;
const id = Date.now();
if (title) {
// hovering the label highlights / clicking the label gives focus to the associated input
slider.append(html`<label for="${id}" class="title">${title}</label>`);
}
const input = html`<input id="${id}" type="range" min="${min}" max="${max}" value="${value}" step="${step}">`;
slider.append(input);
const output = html`<output class="value"></output>`;
slider.append(output);
if (description) {
slider.append(html`<small class="description">${description}</small>`);
}
// slider is the EventTarget for external cells to dispatch input events on
slider.addEventListener("input", (e) => {
const roundedValue = round(slider.value, precision);
slider.value = roundedValue;
input.value = roundedValue;
output.innerText = format ? format(roundedValue) : roundedValue;
});
input.addEventListener("input", () => {
slider.value = round(input.valueAsNumber, precision);
slider.dispatchEvent(new CustomEvent("input"));
});
// set initial value
input.dispatchEvent(new CustomEvent("input"));
return slider;
}
round = (number, precision) => {
const magicRatio = Math.pow(10, precision); // see: https://stackoverflow.com/a/11832950
return Math.round((number + Number.EPSILON) * magicRatio) / magicRatio;
}
round(0.1679477857769509, 2)
html`<style>
label.title {
display: block;
margin-bottom: 3px;
font: 700 0.9rem sans-serif;
}
output.value {
margin-left: 0.5em;
font: 14px Menlo, Consolas, monospace;
}
small.description {
display: block;
margin-top: 3px;
font-size: 0.85rem;
font-style: italic;
}
</style>`
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.
