mdgriffith / elm-ui

What if you never had to write CSS again?
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
BSD 3-Clause "New" or "Revised" License
1.34k stars 110 forks source link

Input.slider doesn't respond to mouseOver #332

Open tankorsmash opened 2 years ago

tankorsmash commented 2 years ago

Ellie: https://ellie-app.com/gr66j7s7SkLa1

Expected behavior When I mouse over the 'thumb' or the slider itself, the background should change color, like it does for the text right after it.

Versions

https://user-images.githubusercontent.com/1312390/149703615-df682b92-8906-4414-a17a-1b4f4a8a859e.mp4

tankorsmash commented 2 years ago

display logic from the ellie to save a click:

main =
    Element.layout [] content

content =
    Element.column [ width fill, centerY, spacing 30 ]
        [ --background and mouseOver don't respond to user input
          Input.slider
            [ width fill
            , height fill
            , Element.mouseOver [ Background.color <| rgb 0 0 0 ]
            , Background.color <| rgb 0 1 0
            ]
            { onChange = Noop
            , label = Input.labelRight [ Element.width (Element.px 250) ] <| text "no BG Color change"
            , min = 0
            , max = 1.0
            , step = Just 0.00001
            , thumb =
                -- thumb mouseover doesn't seem to respond to user input either
                Input.thumb
                    [ width <| Element.px 20
                    , height <| Element.px 20
                    , Background.color <| rgb 0 0 1
                    , Element.mouseOver [ Background.color <| rgb 0 0 0 ]
                    ]
            , value = 0.5
            }
        , --background and mouseOver DO respond to user input
          el
            [ width fill
            , height fill
            , Background.color <| rgb 0 1 0
            , Element.mouseOver [ Background.color <| rgb 1 0 0 ]
            ]
          <|
            text "bg does change"
        ]