for more information visit the package's GitHub page
Package contains the following modules:
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.
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
See it in action
$ cd example
$ npm install
$ npm run dev
Open http://localhost:3000