Working on labeled slider example.

labeled-sliders/labeledSlider/widget.js

@@ -0,0 +1,16 @@
+import { initialModel } from "./model";
+import { update } from "./update";
+import { view } from "./view.jsx";
+
+const createLabeledSliderWidget = id => {
+  const widget = {
+    id: id,
+    initialModel: [initialModel],
+    update: update,
+    view: view
+  };
+
+  return widget;
+};
+
+export { createLabeledSliderWidget };

labeled-sliders/sliderContainer/feature.js

@@ -5,12 +5,11 @@ import { view } from "./view.jsx";
 
 const createSliderContainerFeature = config => {
   const model = config && config.initialModel || initialModel;
-  const services = {
-  };
+
   const featureConfig = {
     inputs: config && config.inputs,
     initialModel: [model, null],
-    update: update(services),
+    update: update,
     view: view
   };
 

labeled-sliders/sliderContainer/update.js

@@ -1,20 +1,21 @@
 import { append, assoc } from "ramda";
 import { Action } from "./action";
+import { createLabeledSliderWidget } from "../labeledSlider/widget";
 
 // handler : Model -> [ model, Maybe (Task Action) ]
-const handler = _services => model => ({
+const handler = model => ({
   NoOp: () => [model],
   AddMeasurement: () => [
     assoc("nextId", model.nextId + 1,
-      assoc("measurements", append({id: model.nextId}, model.measurements), model)
+      assoc("measurements", append(createLabeledSliderWidget(model.nextId), model.measurements), model)
     )
   ],
   RemoveMeasurement: id => [
     assoc("measurements", model.measurements.filter(m => m.id !== id), model)
   ]
 });
 
-// update : Services -> Action -> Model -> [ model, Maybe (Task Action) ]
-const update = services => action => model => Action.case(handler(services)(model), action);
+// update : Action -> Model -> [ model, Maybe (Task Action) ]
+const update = action => model => Action.case(handler(model), action);
 
 export { update };

labeled-sliders/sliderContainer/view.jsx

@@ -8,9 +8,12 @@ const view = actions => model => {
   const onRemoveMeasurement = id =>  _evt => actions.onNext(Action.RemoveMeasurement(id));
 
   const renderMeasurement = measurement => {
+    const view = measurement.view();
+
     return (
       <div key={measurement.id}>
         {measurement.id}
+        {view(model)}
         <button onClick={onRemoveMeasurement(measurement.id)}>Remove Measurement</button>
       </div>
     );