ui.jsx

import ComponentProvider from './provider'

// I'm doing the interpolation here, because
// the range is a visual concern (pixels).
// The visual part of your code shouldn't be
// logicless, it should only have logic related
// to visuals.
function interp(domain, range, value) {
  let domainSize = domain[1] - domain[0]
    , rangeSize = range[1] - range[0]
    , offset = value - domain[0]
    , percentOffset = domainSize * offset
  
  return range[0] + rangeSize * percentOffset
}

const width = 400;

const SliderContainer = styled.div`
  width: ${width}px;
`

const SliderBar = styled.div`
  width: ${width}px;
  height: 5px;
  background-color: tomato;
  position: relative;
`

const SliderHandleUI = styled.div`
  height: 30px;
  width: 30px;
  transform: translate(-15px -30px);
  background-color: tomato;
  position: absolute;
  left: ${({ domain, value }) => interp(domain, [0, innerWidth], value)}px;
`

const SliderHandle({ ...props, onChange }) => (
  <SliderHandleUI
    {...props}
    onDrag={({ movementX }) => {
      let newValue = props.value + interp([0, 360], props.domain, movementX)
      this.props.onChange(newValue)
    }
  />
)
export default ComponentProvider("simpleSlider", {
  SliderHandle,
  SliderContainer,
  SliderBar
})