JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.11/Rx.min.js"></script>
<div class="row">
    Weight: <span id="weight-text"></span>kg <input type="range" min="40" max="120" step="1" value="70" id="weight-slider">
  </div>
  <div class="row">
    Height: <span id="height-text"></span>cm <input type="range" min="140" max="210" value="170" id="height-slider">
  </div>
  
  <h2>BMI is <span id="bmi-text"></span></h2>

JavaScript

(() => {
	const weightSlider = document.querySelector('#weight-slider')
  const heightSlider = document.querySelector('#height-slider')
	const bmiText = document.querySelector('#bmi-text')
  
  const slider$ = (slider) => Rx.Observable.fromEvent(slider, 'input')
  	.throttleTime(60)
  	.map(e => event.target.value)
  	.startWith(slider.value)
  
  const weight = slider$(weightSlider)
  const height = slider$(heightSlider)
  
  const bmi = weight.combineLatest(height, (w, h) => (w / (h * 0.01 * h * 0.01)).toFixed(2))
  
  bmi.subscribe(value => {
  	bmiText.innerHTML = value;
  })
  
})()