const xs = xstream.default;

const {div, span, input, makeDOMDriver} = CycleDOM;

​

function LabeledSlider(sources) {

  const domSource = sources.DOM;

  const props$ = sources.props;

​

  const newValue$ = domSource

    .select('.slider')

    .events('input')

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

​

  const state$ = props$

    .map(props => newValue$

      .map(val => ({

        label: props.label, 

        unit: props.unit,

        min: props.min, 

        value: val, 

        max: props.max

      }))

      .startWith(props)

    )

    .flatten()

    .remember();

​

  const vdom$ = state$

    .map(state =>

      div('.labeled-slider', [

        span('.label',

          state.label + ' ' + state.value + state.unit

        ),

        input('.slider', {

          attrs: {type: 'range', min: state.min, max: state.max, value: state.value}

        })

      ])

    );

​

  const sinks = {

    DOM: vdom$,

    value: state$.map(state => state.value),

  };

  return sinks;

}

​

function main(sources) {

  const props$ = xs.of({

    label: 'Radius', unit: '', min: 20, value: 50, max: 80

  });

  const childSources = {DOM: sources.DOM, props: props$};

  const labeledSlider = LabeledSlider(childSources);

  const childVDom$ = labeledSlider.DOM;

  const childValue$ = labeledSlider.value;

​

  const vdom$ = xs.combine(childValue$, childVDom$)

    .map(([value, childVDom]) =>

      div([

        childVDom,

        div({style: {

          backgroundColor: '#58D3D8',

          width: String(value) + 'px',

          height: String(value) + 'px',

          borderRadius: String(value * 0.5) + 'px'

        }})

      ])

    );

​

  return {

    DOM: vdom$

  };

}

​

Cycle.run(main, {

  DOM: makeDOMDriver('#app')

});