How to use the cyclejs.createModel function in cyclejs

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o

// IMPORTS =========================================================================================
require("../../common/scripts/shims");
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// APP =============================================================================================
let Model = Cycle.createModel(() => {
  let started = Date.now();
  return {
    msSinceStart$: Rx.Observable.interval(100)
      .map(() => Date.now() - started)
  };
});

let View = Cycle.createView(Model => {
  return {
    vtree$: Model.get("msSinceStart$").map(msSinceStart => {
      let timeDelta = (msSinceStart / 1000).toFixed(1);
      return (
        <div>
          Started {timeDelta} seconds ago
        </div>
      );

Cycle.registerCustomElement("Menu", (User, Props) => {
  let Model = Cycle.createModel((Intent, Props) => {
    return {
      items$: Props.get("items$").startWith([]),
      active$: Props.get("active$")
        .merge(Intent.get("selectActive$"))
        .startWith([]),
    }
  });

  let View = Cycle.createView(Model => {
    let items$ = Model.get("items$");
    let active$ = Model.get("active$");
    return {
      vtree$: items$.combineLatest(active$, (items, active) => {
        return (
          <div>
            <nav></nav></div>

Cycle.registerCustomElement("Slider", (DOM, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$"),
    width$: Props.get("width$").merge(Intent.get("changeWidth$")),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    return {
      vtree$: width$.combineLatest(id$, (width, id) => (
        <div width="" style="{{width:" class="item">
          <div>
            <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
          </div>
        </div>
      )),
    };

let width$ = Model.get("width$");
    return {
      vtree$: Rx.Observable.combineLatest(width$, (width) => {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
            </div>
          );
        }
      ),
    };
  });

  let Model = Cycle.createModel((Intent, Props) =&gt; {
    return {
      width$: Props.get("width$"),
    };
  });

  let Intent = Cycle.createIntent(DOM =&gt; {
    return {
      changeWidth$: DOM.event$(".width-slider", "input").map(event =&gt; parseInt(event.target.value))
    };
  });

  DOM.inject(View).inject(Model).inject(Intent, Props)[0].inject(DOM);

  return {
    changeWidth$: Intent.get("changeWidth$"),
  };

Cycle.registerCustomElement("Slider", (User, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$"),
    value$: Props.get("value$")
      .merge(Intent.get("changeValue$"))
      .startWith(0),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let value$ = Model.get("value$");
    return {
      vtree$: value$.combineLatest(id$, (value, id) => (
        <div class="form-group">
          <label>Amount</label>
          <div class="input-group">
            <input placeholder="Amount" value="{value}" type="range">
            <div class="input-group-addon"></div></div></div>

let width$ = Model.get("width$");
    return {
      vtree$: Rx.Observable.combineLatest(id$, width$, (id, width) => {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
            </div>
          );
        }
      ),
    };
  });

  let Model = Cycle.createModel((Intent, Props) =&gt; {
    return {
      id$: Props.get("id$").shareReplay(1),
      width$: Props.get("width$"),
    };
  });

  let Intent = Cycle.createIntent(DOM =&gt; {
    return {
      changeWidth$: DOM.event$(".width-slider", "input").map(event =&gt; parseInt(event.target.value)),
    };
  });

  DOM.inject(View).inject(Model).inject(Intent, Props)[0].inject(DOM);

  return {
    changeWidth$: Intent.get("changeWidth$")

Cycle.registerCustomElement("Slider", (User, Props) => {
  let Model = Cycle.createModel((Intent, Props) => ({
    id$: Props.get("id$").shareReplay(1),

    value$: Props.get("value$")
      .merge(Intent.get("changeValue$"))
      .startWith(0),

    color$: Props.get("color$")
      .merge(Intent.get("changeColor$"))
      .startWith("#F00"),
  }));

  let View = Cycle.createView(Model => {
    let id$ = Model.get("id$");
    let value$ = Model.get("value$");
    let color$ = Model.get("color$");
    return {

Cycle.registerCustomElement("Slider", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0) };
  });

  var View = Cycle.createView(function (Model) {
    var value$ = Model.get("value$");
    return {
      vtree$: value$.map(function (value) {
        return h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, placeholder: "Amount" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      changeValue$: User.event$("[type=range]", "input").map(function (event) {
        return parseInt(event.target.value);