How to implement a slider in elm

Question

I want to link a slider and a input text area such that when I change one the other is automatically updated. I found elm-reactor's implementation, which uses native JavaScript and works with a callback. The callback is called whenever the slider is moved but I can't get it to move when the value is changed from the text area...

Answer 1

Updated to Elm 0.19 from banncee's update to 0.18 from Simon H's original answer

import Browser
import Html exposing (Attribute, div, text, input)
import Html.Attributes as H exposing (..)
import Html.Events exposing (on, onInput)

type alias Model = Int

type Msg
    = Update String

init : Model
init = 0

update : Msg -> Model -> Model
update (Update v) model =
    case String.toInt v of
        Just i -> i
        Nothing -> model

view model =
  div []
    [ input
      [ type_ "range"
      , H.min "0"
      , H.max "20"
      , value  <| String.fromInt model
      , onInput Update
      ] []
    , text <|String.fromInt model
    ]

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