interval([290, 340], {
step: 1,
value: [290, 340],
label: "My slider"
})
interval([1, 5], {
step: 1,
value: [1, 5],
label: "My slider"
})
interval([6.8, 9.92], {
step: 0.01,
value: [6.9, 9.92],
label: "My slider"
})
interval([92, 120], {
step: 1,
value: [92, 120],
label: "My slider"
})
rangeSlider({
min: -10,
max: 10,
step: 0.25,
value: [0, 8],
title: "My slider",
description: "This is a slider."
})
rangeInput({
min: -10,
max: 10,
step: .25,
value: [0, 8],
})
function interval(range = [], options = {}) {
const [min = 0, max = 1] = range;
const {
step = 0.001,
label = null,
value = [min, max],
format = ([start, end]) =>
(Number.isInteger(end) && end > 100) ||
(!Number.isInteger(end) && end > 8.0)
? htl.html`<pre style="margin:0">${start} ${end}`
: htl.html`<pre style="margin:0">${start} ${end}`,
color,
width,
theme
} = options;
const __ns__ = DOM.uid("scope").id;
const css = `
#${__ns__} {
font: 13px/1.2 var(--sans-serif);
display: flex;
align-items: baseline;
flex-wrap: wrap;
max-width: 100%;
width: auto;
}
@media only screen and (min-width: 30em) {
#${__ns__} {
flex-wrap: nowrap;
width: 360px;
}
}
#${__ns__} .label {
width: 120px;
padding: 5px 0 4px 0;
margin-right: 6.5px;
flex-shrink: 0;
}
#${__ns__} .form {
display: flex;
width: 100%;
}
#${__ns__} .range {
flex-shrink: 1;
width: 100%;
}
#${__ns__} .range-slider {
width: 100%;
}
`;
const $range = rangeInput({
min,
max,
value: [value[0], value[1]],
step,
color,
width,
theme
});
const $output = html`<output>`;
const $view = html`<div id=${__ns__}>
${label == null ? "" : html`<div class="label">${label}`}
<div class=form>
<div class=range>
${$range}<div class=range-output>${$output}</div>
</div>
</div>
${html`<style>${css}`}
`;
const update = () => {
const content = format([$range.value[0], $range.value[1]]);
if (typeof content === "string") $output.value = content;
else {
while ($output.lastChild) $output.lastChild.remove();
$output.appendChild(content);
}
};
$range.oninput = update;
update();
return Object.defineProperty($view, "value", {
get: () => $range.value,
set: ([a, b]) => {
$range.value = [a, b];
update();
}
});
}
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.
