simonh1000/elm-colorpicker - version: 2.0.3

for more information visit the package's GitHub page

Package contains the following modules:

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.

screen shot

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 ColorPickerMsg

Example

See it in action

$ cd example
$ npm install
$ npm run dev
Open http://localhost:3000

To Do

Changelog

Inspired by