#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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.