Я хочу связать ползунок и область ввода текста таким образом, чтобы при изменении одного он автоматически обновлялся. Я нашел реализацию elm-реактора, которая использует собственный JavaScript и работает с обратным вызовом. Обратный вызов вызывается всякий раз, когда слайдер перемещается, но я не могу заставить его двигаться, когда значение изменяется из текстовой области...
Как реализовать слайдер в вязах
Ответ 1
Это не так уж сложно. Этот код показывает, как установить значение двух типов ввода.
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
Обновление для 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
}
Обновление для 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
}
См. пример runelm
Ответ 2
Основная идея состоит в том, чтобы иметь одно каноническое представление числа в вашей модели. Всякий раз, когда он изменяется (это будет действие), вам все равно, откуда это произошло, вы просто обновляете модель. А затем вы визуализируете как текстовую область, так и ползунок на основе значения числа в модели. (Мы говорим о единственном текстовом поле с номером, а не в квадрате абзаца свободной формы?)
Надеюсь, что это поможет!
Ответ 3
Обновлен до Вяза 0.19 от banncee до 0.18 от 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
Из оригинального ответа Simon H, Update для 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
}
Ответ 5
Между тем есть библиотеки для создания ползунков: