如何在榆树中实现滑块

Question

我想要 link 一个滑块和一个输入文本区域，这样当我更改其中一个时，另一个会自动更新。我找到了 elm-reactor 的实现，它使用原生 JavaScript 并与回调一起工作。每当滑块移动时都会调用回调，但当值从文本区域更改时我无法移动它...

Answer 1

基本思想是在模型中使用一种规范的数字表示法。每当它发生变化（那将是一个动作）时，您不关心变化来自哪里，您只需更新模型。然后根据模型中数字的值渲染文本区域和滑块。（我们说的是只有数字的单个文本字段，而不是自由格式的段落框，对吧？）

希望对您有所帮助！

Answer 2

其实并没有那么难。此代码显示如何设置两种输入类型的值。例如参见 [=14=]

0.19 更新

type alias Model =
    Int


type Msg
    = Update String


update : Msg -> Model -> Model
update (Update v) model =
    String.toInt v |> Maybe.withDefault 0


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

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
    }

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
    }

** 原始 O.16 版本 **

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

Answer 3

来自 Simon H 的原始回答，Elm 0.18 更新：

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
    }

Answer 4

更新到 Elm 0.19 从 banncee 从 Simon H 的原始答案更新到 0.18

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
        }

Answer 5

同时，有一些库可以创建滑块：

如何在榆树中实现滑块

How to implement a slider in elm

elm