       renderColor()
       renderLabel("alpha")
       (Slider {
-        initialValue: @state.alpha,
+        value: @state.alpha,
         onChange: (newValue) => @setAlpha(newValue)
       }),
       renderLabel("saturation")
       (Slider {
-        initialValue: @state.sat, max: 100,
+        value: @state.sat, max: 100,
         onChange: (newValue) => @setSat(newValue)
       }),
       (ColorGrid {rows, selectedColor: @state.colorString, onChange: onSelectColor})

    rows = []
    rows.push ({hue: 0, sat: 0, light: i, alpha: @state.alpha} for i in [0..100] by 10)
    for hue in [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
      rows.push ({hue, sat: 100, light: i, alpha: @state.alpha} for i in [10..90] by 8)

    onSelectColor = (hsla, s) => @setColor(s)


          e.stopPropagation()
          update(getVal(e))
        onMouseMove: (e) =>
          return unless @state?.isMouseDown
          e.stopPropagation()
          value = getVal(e)
          cancelAnimationFrame(@state.animFrameId) if @state.animFrameId
