function verticalSliders(config = {}) {
const len = (arr) => arr ? arr.length : undefined;
let {
n = len(config.values) ||
len(config.mins) ||
len(config.maxs) ||
len(config.values) ||
len(config.names) ||
len(config.labels) ||
1,
mins = Array(n).fill(0),
maxs = Array(n).fill(1),
steps = Array(n).fill("any"),
values = mins.map((min, idx) => (maxs[idx] + min) / 2),
names = Array(n).fill(0).map((_, idx) => `${idx}`),
labels = Array(n).fill(""),
labelHeight = 54,
title = ''
} = config;
return form(html`<form>
<style>
.verticalslider input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 100%;
height: 175px;
}
.verticalslider input[type=range]:focus {
outline: none;
}
.verticalslider input[type=range]::-moz-range-track {
width: 100%;
height: 100%;
cursor: pointer;
background: lightsteelblue;
}
.verticalslider input[type=range]::-moz-range-thumb {
height: 24px;
width: calc(100% - 2px);
border-radius: 4px;
background: #ffffff;
cursor: pointer;
}
.verticalslider td {
margin: 0;
padding: 0;
}
</style>
<table class="verticalslider" style="table-layout: fixed; width:100%;text-align:center;">
<thead>
<tr style="font-size: 10px;font-style:italic; border: none;"><td colspan="${n}"><b>${title}</b></td></tr>
</thead>
<tfoot>
<tr style="font-size: 10px;font-style:italic;">
${labels.map(label => html`<td style="height: ${labelHeight}px; width: 100%;"><div style="transform-origin: top left; transform: rotate(-90deg) translate(-${labelHeight}px, 7px); vertical-align: middle; width: ${labelHeight}px; height: 12px; margin-top: 2px; text-align: right;">${label}</div></td>`)}
</tr>
</tfoot>
<tbody>
<tr>
${Array(n).fill(0).map((_, idx) => html`<td><input
type=range
name=${names[idx]}
step=${steps[idx]}
min=${mins[idx]}
max=${maxs[idx]}
value="${values[idx]}"
orient=vertical></td>`)}
</tr>
</tbody></table>`)
}
viewof demo = verticalSliders({
values: Array(30).fill(0.5),
maxs: Array(30).fill(1),
mins: Array(30).fill(0),
labels: Array(30).fill(0).map((_, i) => i*100)
})
demo
viewof color = verticalSliders({
names: ["r", "g", "b"],
labels:["red", "green", "blue"],
maxs: [255,255,255],
steps: [1,1,1]
})
import {form} from "@tomlarkworthy/mutable-form-input"
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.
