Slider

A range input bound with data-model. The numeric value and its derived label both read straight from state — there is no change handler to wire up.

Markup

<input type="range" min="0" max="100" data-model="value" />

<span data-text="value + '%'"></span>
<span data-text="label()"></span>

Component

Micra.define("slider", {
  state: { value: 40 },
  label() {
    const v = Number(this.state.value);
    return v < 33 ? "Quiet" : v < 66 ? "Comfortable" : "Loud";
  },
});

The readout and the label both read straight from value, so dragging the range input is the only thing that mutates state — there is no change handler to wire up, and nothing to keep the two displays in sync.