#generative #craft #design #math #art #technology #science #opensource https://t.co/xHWjf1Gz9s
viewof r = html`<input type=range min=0 max=255 step=1 value=127>`
viewof g = html`<input type=range min=0 max=255 step=1 value=127>`
viewof b = html`<input type=range min=0 max=255 step=1 value=127>`
html`<div style="height:33px;width:33px;background:rgb(${r},${g},${b});">`
viewof rgb = {
const form = html`<form>
<div><input type=range name=r min=0 max=255 step=1 value=127> <i>r</i></div>
<div><input type=range name=g min=0 max=255 step=1 value=127> <i>g</i></div>
<div><input type=range name=b min=0 max=255 step=1 value=127> <i>b</i></div>
</form>`;
form.oninput = () => form.value = [
form.r.valueAsNumber,
form.g.valueAsNumber,
form.b.valueAsNumber
];
form.oninput();
return form;
}
html`<div style="height:33px;width:33px;background:rgb(${rgb.join()});">`
rgbForm = html`<form>
<div><input type=range name=r min=0 max=255 step=1 value=127> <i>r</i></div>
<div><input type=range name=g min=0 max=255 step=1 value=127> <i>g</i></div>
<div><input type=range name=b min=0 max=255 step=1 value=127> <i>b</i></div>
</form>`
r2 = Generators.input(rgbForm.r)
g2 = Generators.input(rgbForm.g)
b2 = Generators.input(rgbForm.b)
html`<div style="height:33px;width:33px;background:rgb(${r2},${g2},${b2});">`
md`The [@jashkenas/inputs](@jashkenas/inputs) Library provides some useful functions to create beautifully styled inputs. Here is how to combine several of those inputs in a single cell:
`
viewof rgb2 = {
const slider1 = slider({min: 1, max: 255, value: 255, step: 1, title: "red"})
const slider2 = slider({min: 1, max: 255, value: 100, step: 1, title: "green"})
const slider3 = slider({min: 1, max: 255, value: 100, step: 1, title: "blue"})
const form = html`<form>${slider1}${slider2}${slider3}</form>`;
form.oninput = () => form.value = [
slider1[0].valueAsNumber,
slider2[0].valueAsNumber,
slider3[0].valueAsNumber
];
form.oninput();
return form;
}
html`<div style="height:33px;width:33px;background:rgb(${rgb2.join()});">`
import {slider, color} from "@jashkenas/inputs"
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.
