CODEWITHSUNDEEP
elmelm-mdl
manonthemat
manonthemat

Reputation: 6251

How to migrate from working input range to elm-mdl Slider?

I currently have a function that I use for a range, and number input type for each piece of data (trait). Updates to the model are done via EditTrait Mhid Relevance message.

valueRange : String -> TraitWithRelevance -> Html Msg
valueRange typ trait =
    let
        ( name, mhid, relevance ) =
            trait
    in
        input [ Attr.type_ typ, Attr.min "0", Attr.max "100", Attr.value relevance, Attr.step "1", onInput <| EditTrait mhid ] []

In an attempt to bring in Google's material design through elm-mdl, I want to replace the valueRange "range" call with the valueSlider function which utilizes the Slider component from elm-mdl.

rendered slider

The code below compiles, but obviously doesn't work, because the important onChange handler is missing. However, it renders correctly and the slider changes, when I update a trait's relevance value through the input number element.

valueSlider trait =
    let
        ( name, mhid, relevance ) =
            trait

        relAsFloat =
            String.toFloat relevance |> Result.toMaybe |> Maybe.withDefault 0
    in
        Slider.view
            [ Slider.value relAsFloat
            , Slider.min 0
            , Slider.max 100
            , Slider.step 1
            ]

When I throw in Slider.onChange (EditTrait mhid), which works on the regular input, the compiler gives me this error.

The argument to function onChange is causing a mismatch.

438| Slider.onChange (EditTrait mhid) ^^^^^^^^^^^^^^ Function onChange is expecting the argument to be:

Float -> m

But it is:

Relevance -> Msg

Detected errors in 1 module.

Upvotes: 0

Views: 98

Answers (1)

Hugo Bessa
Hugo Bessa

Reputation: 138

As onInput type is (String -> msg) -> Html.Attribute msg I suppose Relevance is a String, and EditTrait is mhid -> String -> Msg.

In this case, Slider.onChange (EditTrait mhid) doesn't work because Slider.onChange expects a Float -> Msg not Relevance -> Msg (as the compiler message reads.)

To solve this issue, you should change EditTrait to receive a Float instead of String. Changing Relevance type to be a Float and updating the code accordingly should do the trick.

Upvotes: 1

Related Questions