import Html exposing (div, text, input)
import Html.Attributes as H exposing (..)
import Html.Events as E
mbox =
Signal.mailbox "0"
view v =
let
evth = E.on "change" E.targetValue (Signal.message mbox.address)
in
div []
[ input
[ type' "range"
, H.min "0"
, H.max "20"
, value v
, evth
] []
, input
[ type' "text", value v, evth ] []
]
main =
Signal.map view mbox.signal
Update for 0.17
import Html exposing (Attribute, div, text, input)
import Html.App as Html
import Html.Attributes as H exposing (..)
import Html.Events exposing (on, onInput)
import Json.Decode exposing (string, map)
import String
type alias Model = Int
type Msg
= Update String
update : Msg -> Model -> Model
update (Update v) model =
String.toInt v |> Result.withDefault 0
view model =
div []
[ input
[ type' "range"
, H.min "0"
, H.max "20"
, value <| toString model
, onInput Update
] []
, text <| toString model
]
main =
Html.beginnerProgram
{ model = 0
, view = view
, update = update
}
Update for 0.18
import Html exposing (Attribute, div, text, input)
import Html.Attributes as H exposing (..)
import Html.Events exposing (on, onInput)
import Json.Decode exposing (string, map)
import String
type alias Model = Int
type Msg
= Update String
update : Msg -> Model -> Model
update (Update v) model =
String.toInt v |> Result.withDefault 0
view model =
div []
[ input
[ type_ "range"
, H.min "0"
, H.max "20"
, value <| toString model
, onInput Update
] []
, text <| toString model
]
main =
Html.beginnerProgram
{ model = 0
, view = view
, update = update
}
import Html exposing (Attribute, div, text, input, beginnerProgram)
import Html.Attributes as H exposing (..)
import Html.Events exposing (on, onInput)
type alias Model = Int
type Msg
= Update String
update : Msg -> Model -> Model
update (Update v) model =
String.toInt (Debug.log "" v) |> Result.withDefault 0
view model =
div []
[ input
[ type_ "range"
, H.min "0"
, H.max "20"
, value <| toString model
, onInput Update
] []
, text <| toString model
]
main =
Html.beginnerProgram
{ model = 0
, view = view
, update = update
}
1
Updated to Elm 0.19 来自banncee 's update to 0.18 from Simon H'的原始答案
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
}
4 回答
事实并非那么难 . 此代码显示如何设置两种输入类型的值 .
Update for 0.17
Update for 0.18
见runelm example
基本思想是在模型中使用一个数字的规范表示 . 每当它发生变化时(这将是一个动作),你不关心变化的来源,你只需要更新模型 . 然后根据模型中数字的值渲染文本区域和滑块 . (我们说的只是一个单独的文本字段,而不是一个自由形式的段落框,对吧?)
希望有所帮助!
来自Simon H的原始答案, Update for Elm 0.18:
Updated to Elm 0.19 来自banncee 's update to 0.18 from Simon H'的原始答案