एल्म

Question

में स्लाइडर को कैसे कार्यान्वित करें मैं एक स्लाइडर और इनपुट टेक्स्ट क्षेत्र को लिंक करना चाहता हूं जैसे कि जब मैं एक बदलता हूं तो दूसरा स्वचालित रूप से अपडेट हो जाता है। मुझे एल्म-रिएक्टर का कार्यान्वयन मिला, जो देशी जावास्क्रिप्ट का उपयोग करता है और कॉलबैक के साथ काम करता है। जब भी स्लाइडर स्थानांतरित हो जाता है तो कॉलबैक को कॉल किया जाता है लेकिन जब टेक्स्ट टेक्स्ट से मूल्य बदल जाता है तो मुझे इसे स्थानांतरित नहीं किया जा सकता है ...

Answer 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 example

Answer 2

मूल विचार यह है कि आपके मॉडल में संख्या का एक कैननिक प्रतिनिधित्व होना है। जब भी यह बदलता है (यह एक क्रिया होगी), आपको परवाह नहीं है कि परिवर्तन कहां से आया था, आप बस मॉडल को अपडेट करें। और फिर आप मॉडल में संख्या के मूल्य के आधार पर पाठ क्षेत्र और स्लाइडर दोनों प्रस्तुत करते हैं। (हम केवल एक नंबर के साथ एक टेक्स्ट फ़ील्ड की बात कर रहे हैं, न कि एक मुक्त फॉर्म पैराग्राफ बॉक्स, है ना?)

आशा है कि मदद करता है!

Answer 3

साइमन एच का मूल जवाब से, एल्म 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 
    }