         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,


Slider = React.createFactory React.createClass
  displayName: 'Slider'
  getDefaultProps: -> {min: 0, max: 1, onChange: ->}
  getInitialState: -> {value: @props.initialValue}
  render: ->
    {div} = React.DOM
    rangeSize = @props.max - @props.min
    pos = (@state.value - @props.min) / rangeSize
    posPercent = pos * 100 + '%'

    lineH = 4

      @setHSLAFromColorString(colorString)
  componentWillUnmount: -> @unsubscribe()

  setHSLAFromColorString: (c, forceSat=false) ->
    hsla = parseHSLAString(c)
    if hsla
      @setState({hsla, alpha: hsla.alpha, sat: hsla.sat})
    else
      @setState({hsla: null})

  closePicker: -> @setState({isPickerVisible: false})
  togglePicker: ->
