SimpleSlider.jsx

import React from 'react'
/* 
  This is the semantic component, notice there is nothing about
  the display of the component defined here. 👍Yay SoC👍.
  There's nothing preventing this component from being used with
  react native, or as part of an svg, because it only describes
  the semantics of the slider.
  
  Obviously a full featured slider would probably need to do a lot
  more.
*/
export default ({ startValue, stopValue, domain, onStartChange, onStopChange,
    theme: {
      SliderHandle, 
      SliderBar,
      SliderContainer
    }
  }) =>
    return (
      <SliderContainer>
        <SliderBar
          onStartChange={props.onStartChange}
          onStopChange={props.onStopChange}
          domain={domain}
          startValue={startValue}
          stopValue={stopValue}
        >
          <SliderHandle
            position="start"
            domain={domain}
            value={startValue}
            onChange={props.onStartChange}
          />
          <SliderHandle
            position="stop"
            domain={domain}
            value={stopValue}
            onChange={props.onStopChange}
          />
        </SliderBar>
      </SliderContainer>
    )
  }
}