         onMouseDown: start
         onMouseUp: stop
         onMouseLeave: stop
+        onMouseEnter: stop
       },
-      (div {style: {
-        position: 'absolute', top: lineM, right: lineM, bottom: lineM, left: lineM,
+      (div {ref: 'line', style: {
+        position: 'absolute',
+        top: lineM, right: lineM + extraHorzM,
+        bottom: lineM, left: lineM + extraHorzM,
         backgroundColor: 'black', borderRadius: lineH / 2}},
         (div {style: {
           borderRadius: rad,

    m = 4
    fullH = m * 2 + rad * 2
    lineM = (fullH - lineH) / 2

    getVal = (e) =>
      el = @getDOMNode()
      parentPosition = getPosition(el)
      x = e.clientX - parentPosition.x
      positionInRange = (x - lineM) / (el.clientWidth - lineM * 2)
      Math.max(@props.min, Math.min(@props.max, @props.min + rangeSize * positionInRange))

    update = (value) =>
      @setState({value})
      @props.onChange(value)
    start = => @setState({isMouseDown: true})
    stop = =>
      @props.onChange(@state.value)
      @setState({isMouseDown: false})

    (div {


ColorGrid = React.createFactory React.createClass
  displayName: 'ColorGrid'
  shouldComponentUpdate: (nextProps, nextState) -> true
    #@props.selectedColor != nextProps.selectedColor
  render: ->
    {div} = React.DOM
    (div {},
