This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 1.1.4
Committed At 2018-10-07 06:34:49 UTC

Modules

    README

    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

    • Enable use of different sizes of svg elements

    Changelog

    • 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

    Inspired by