/*jshint esnext: true */

​

const {div, input, label, h2, makeDOMDriver} = CycleDOM;

const isolate = CycleIsolate;

​

function intent(DOMSource) {

  return DOMSource.select('.slider').events('input')

    .map(ev => ev.target.value);

}

​

function model(newValue$, props$) {

  const initialValue$ = props$.map(props => props.init).first();

  const value$ = initialValue$.concat(newValue$);

  return Rx.Observable.combineLatest(value$, props$, (value, props) => {

    return {

      label: props.label,

      unit: props.unit,

      min: props.min,

      max: props.max,

      value: value,

    };

  });

}

​

function view(state$) {

  return state$.map(state =>

      div('.labeled-slider', [

        label('.label', `${state.label}: ${state.value}${state.unit}`),

        input('.slider', {type: 'range', min: state.min, max: state.max, value: state.value})

      ])

    );

}

​

function LabeledSlider(sources) {

  const change$ = intent(sources.DOM);

  const state$ = model(change$, sources.props);

  const vtree$ = view(state$);

  return {

    DOM: vtree$

  };

}

​

const IsolatedLabeledSlider = function (sources) {

  return isolate(LabeledSlider)(sources);

};

​

function main(sources) {

​

  let labeledSliderArray = [

    {label: 'Weight', unit: 'kg',    min: 40,  max: 150, init: 70},

    {label: 'Height', unit: 'cm',    min: 140, max: 220, init: 170},

    {label: 'Age',    unit: 'years', min: 10,  max: 80,  init: 20}

  ];

​

  vtrees = labeledSliderArray.map(function (item) {

    const itemProps$ = Rx.Observable.of(item);  

    const itemSinks = IsolatedLabeledSlider({

      DOM: sources.DOM, props: itemProps$

    });

    return itemSinks.DOM;

  });

​

  const vtree$ = Rx.Observable.combineLatest(

    vtrees, (...vtreeargs) =>

      div(vtreeargs)

  );

  return {

    DOM: vtree$

  };

}

​

const drivers = {

  DOM: makeDOMDriver('#app'),

};

​

Cycle.run(main, drivers);