Как реализовать слайдер в вязе

Я хочу связать ползунок и область ввода текста так, чтобы при смене одного из них другой автоматически обновлялся. Я нашел реализацию elm-реактора, которая использует собственный JavaScript и работает с обратным вызовом. Обратный вызов вызывается всякий раз, когда ползунок перемещается, но я не могу заставить его двигаться, когда значение изменяется из текстовой области ...

elm
12 голосов | спросил Deimos 22 72015vEurope/Moscow11bEurope/MoscowSun, 22 Nov 2015 20:09:28 +0300 2015, 20:09:28

4 ответа


0

Это не так сложно на самом деле. Этот код показывает, как установить значение двух типов ввода.

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

ответил Simon H 22 72015vEurope/Moscow11bEurope/MoscowSun, 22 Nov 2015 23:54:02 +0300 2015, 23:54:02
0

Основная идея состоит в том, чтобы иметь одно каноническое представление числа в вашей модели. Всякий раз, когда он изменяется (это будет действие), вам все равно, откуда пришло изменение, вы просто обновляете модель. Затем вы визуализируете как текстовую область, так и ползунок на основе значения числа в модели. (Мы говорим об одном текстовом поле, содержащем только номер, а не блок абзаца свободной формы, верно?)

Надеюсь, это поможет!

ответил mgold 22 72015vEurope/Moscow11bEurope/MoscowSun, 22 Nov 2015 21:06:32 +0300 2015, 21:06:32
0

Исходный ответ Саймона Х: Обновление для Вяза 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
    }
ответил banncee 7 WedEurope/Moscow2016-12-07T00:05:46+03:00Europe/Moscow12bEurope/MoscowWed, 07 Dec 2016 00:05:46 +0300 2016, 00:05:46
0

Обновлено до Вяза 0,19 от обновления Бэннси до 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
        }
ответил user2162871 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 21 Sep 2018 09:52:44 +0300 2018, 09:52:44

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132