<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;

const { div, label, input, button, p, makeDOMDriver } = CycleDOM;

function view(state$) {
  return state$.map(state => {
    return div([
      div(".height-slider", [
        label(`Height: ${state.height} cm`),
        input(".height", {
          attrs: { type: "range", min: 140, max: 220, value: 150 }
        })
      ]),
      div(".weight-slider", [
        label(`Weight: ${state.weight} kg`),
        input(".weight", {
          attrs: { type: "range", min: 40, max: 100, value: 50 }
        })
      ]),
      p([label(`BMI: ${state.bmi}`)])
    ]);
  });
}

function intent(sources) {
  const domSource = sources.DOM;
  const height$ = domSource
    .select(".height")
    .events("input")
    .map(ev => ev.target.value);
  const weigth$ = domSource
    .select(".weight")
    .events("input")
    .map(ev => ev.target.value);
  return {
    height: height$,
    weight: weigth$
  };
}

function model(intents) {
  const height = intents.height.startWith(165);
  const weight = intents.weight.startWith(58);
  const state$ = xs.combine(height, weight).map(([h, w]) => {
    const hm = h * 0.01;
    const bmi = Math.round(w / (hm * hm));
    return {
      height: h,
      weight: w,
      bmi
    };
  });
  return state$;
}

function main(sources) {
  const actions = intent(sources);
  const state$ = model(actions);
  const vdom$ = view(state$);
  return { DOM: vdom$ };
}

const drivers = {
  DOM: makeDOMDriver("#app")
};

Cycle.run(main, drivers);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.jonirrings.com/xstream/xstream.min.js
  2. https://static.jonirrings.com/xstream/extra/fromEvent.js
  3. https://unpkg.com/@cycle/run@4.4.0/dist/cycle-run.min.js
  4. https://unpkg.com/@cycle/dom@20.4.0/dist/cycle-dom.min.js