viewof inputs = view`
${[
"c1",
cautious(
(apply, reset) => view`<div>
${['foo', Inputs.range([0, 100], { label: 'Foo', step: 1 })]}
${['bar', Inputs.text({ value: 'change me', label: 'Bar' })]}
<hr style="margin:0;padding:10px;max-width:360px">
<button onclick=${apply}>Apply</button>
<button onclick=${reset}>Reset</button>`
)
]}
${[
"c2",
cautious(
(apply, reset) => view`<div>
${['baz', Inputs.range([0, 100], { label: 'Baz', step: 1 })]}
${['bat', Inputs.text({ value: 'change me', label: 'Bat' })]}
<hr style="margin:0;padding:10px;max-width:360px">
<button onclick=${apply}>Apply</button>
<button onclick=${reset}>Reset</button>`
)
]}
`