cycle.js

import Rx from 'rx'
import Cycle from '@cycle/core'
import {h, div, input, h2, makeDOMDriver} from '@cycle/dom'

/* utils */
const renderWeightSlider = weight => div([
  `Weight${weight}kg`,
  input('#weight', {type: 'range', min: 40, max: 140, value: weight})])

const renderHeightSlider = height => div([
  `Height${height}cm`,
  input('#height', {type: 'range', min: 140, max: 210, value: height})])

const calculateBMI = (weight, height) =>
  Math.round(weight / (Math.pow(height * 0.01, 2)))
/* utils */

/* model */
const model = actions =>
  Rx.Observable.combineLatest(
    actions.changeWeight$.startWith(70),
    actions.changeHeight$.startWith(170),
    (weight, height) => ({weight, height, bmi: calculateBMI(weight, height)}))
/* model */

/* view */
const view = state$ =>
  state$.map(({weight, height, bmi}) => div([
    renderWeightSlider(weight),
    renderHeightSlider(height),
    h2(`BMI is ${bmi}`)]))
/* view */

/* intent */
const intent = DOM => ({
  changeWeight$: DOM.select('#weight').events('input').map(e => e.target.value),
  changeHeight$: DOM.select('#height').events('input').map(e => e.target.value)})
/* intent */

const main = ({DOM}) => ({DOM: view(model(intent(DOM)))})

Cycle.run(main, {DOM: makeDOMDriver('#root')})