Elm UI Progress Example - Elm-ui Typing CST Test

Elm UI Progress Example — Elm-ui Code

A slider that updates a visual progress bar.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onInput)

-- MODEL

type alias Model =
	{ progress : Float }

initialModel : Model
initialModel = { progress = 0 }

-- UPDATE

type Msg = Update Float

update : Msg -> Model -> Model
update msg model =
	case msg of Update val -> { model | progress = val }

-- VIEW

view : Model -> Element Msg
view model =
	column [ spacing 10, padding 20, alignCenter ]
		[ el [ width fill, height (px 20), Background.color blue, padding 0 ] (el [] (text (String.fromFloat model.progress)))
		, Element.input [ onInput (str -> Update (String.toFloat str |> Result.withDefault 0)) ]
		]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

Elm-ui Language Guide

Elm UI is a library for building web interfaces in Elm, focusing on layout and styling in a declarative, type-safe way without relying on CSS.

More Elm-ui Typing Exercises

Practice Other Languages