<button id="increase">+</button>
<button id="decrease">-</button>
<input id="input" type="text" />
<div id="count"></div>
const increaseButton = document.querySelector("#increase");
const increase = Rx.Observable
  .fromEvent(increaseButton, "click")
  .map(() => state => state.update("count", count => count + 1));

const decreaseButton = document.querySelector("#decrease");
const decrease = Rx.Observable
  .fromEvent(decreaseButton, "click")
  .map(() => state => state.update("count", count => count - 1));

const inputElement = document.querySelector("#input");
const input = Rx.Observable
  .fromEvent(inputElement, "input")
  .map(event => state => state.set("count", event.target.value));

const initialState = Immutable.fromJS({
  count: 0
});

const state = Rx.Observable
  .merge(increase, decrease, input)
  .scan((state, changeFn) => changeFn(state), initialState);

state.subscribe(state => {
  document.querySelector("#count").innerHTML = state.get("count");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.1/Rx.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js