如何从工作输入范围迁移到elm-mdl Slider？

Question

我目前有一个用于范围的函数，以及每个数据（特征）的数字输入类型。模型的更新通过EditTrait Mhid Relevance消息完成。

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 ] []

为了尝试通过elm-mdl引入Google的素材设计，我想将valueRange "range"调用替换为使用elm-mdl中的Slider组件的valueSlider函数。

下面的代码编译，但显然不起作用，因为缺少重要的onChange处理程序。但是，当我通过输入数字元素更新特征的相关性值时，它会正确渲染并且滑块会发生变化。

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
            ]

当我输入Slider.onChange (EditTrait mhid)时，编译器会给我这个错误。

  

函数onChange的参数导致不匹配。

     

438 | Slider.onChange（EditTrait mhid）                                       ^^^^^^^^^^^^^^函数onChange期望参数为：

Float -> m

     

但它是：

Relevance -> Msg

     

在1个模块中检测到错误。

Answer 1

由于onInput类型为(String -> msg) -> Html.Attribute msg，我认为Relevance是String，EditTrait是mhid -> String -> Msg。

在这种情况下，Slider.onChange (EditTrait mhid)无法正常工作，因为Slider.onChange期望Float -> Msg不是Relevance -> Msg（正如编译器消息所示。）

要解决此问题，您应更改EditTrait以接收Float而不是String。将Relevance类型更改为Float并相应地更新代码应该可以解决问题。