Elm ColorPicker widget
An Elm library to help you implement a colo(u)r picker tool without relying upon the presence - or otherwise - of a built in browser widget.
Example
import ColorPicker
type alias Model =
{ colorPicker : ColorPicker.State
, colour : Color
}
init : Model
init =
{ colorPicker = ColorPicker.empty
, colour = Color.rgb 255 0 0
}
type Msg
= ColorPickerMsg ColorPicker.Msg
update : Msg -> Model -> Model
update message model =
case message of
ColorPickerMsg msg ->
let
( m, colour ) =
ColorPicker.update msg model.colour model.colorPicker
in
{ model
| colorPicker = m
, colour = colour |> Maybe.withDefault model.colour
}
view : Model -> Html Msg
view model =
ColorPicker.view model.colour model.colorPicker
|> Html.map ColorPickerMsgExample
See it in action
$ cd example
$ npm install
$ npm run dev
Open http://localhost:3000To Do
- Enable use of different sizes of svg elements
Changelog
- 2.0.0 : Remove two exposed helpers that were no longer needed, and buggy
- 1.1.4 : add opacity picker; better styling; add classes to elements of widget; improved modelling under the hood
- 1.1.3 : 0.19 (with new Color library)
- 1.0.0 : Initial release