stephenreddek / elm-range-slider Goto Github PK

It'd be nice to make the labels on the slider optional. I've tried this on my local fork and got it going and can do a PR for this when (or if) my other PR is merged.

Hello @stephenreddek! Now that the elm 0.19 is out, are you planning to update this package? I'm using it in my app which I'd like to update to 0.19 as well. Let me know if you find time to do this in the coming weeks. If not, I might do a PR to migrate this package later..

This is just minor issue, but opening it anyway :-)
The type of RangeSlide.update function has nonstandard order of arguments:
update : RangeSlider -> Msg -> (RangeSlider, Cmd Msg)

The generally accepted order of arguments for update functions is
update : Msg -> RangeSlider -> (RangeSlider, Cmd Msg)

Also looking at the implementation of update I see that it returns Cmd.none in all cases.
It would be more user-friendly if the signature changed to
update : Msg -> RangeSlider -> RangeSlider
making it clear that no commands are created

Thank you for this library, looks very nice. I'd like to use it in my project. I just discovered one issue with it:

When minimum value is dragged over to the maximum, it's impossible to return it back.
Try the following steps: drag the maximum knob as far right as possible. Then drag the minimum one over it (also to the rightmost value). Now you're stuck -> unable to drag minimum back.

I'm building a UI that updates the url when the slider is updated. Currently it's hammering the history API and I'm getting an error in firefox that states Too many calls to Location or History APIs within a short timeframe and the ui freezes. It would be nice to have access to the sub messages (especially DragEnd). All this requires is changing the Msg to Msg(..) in the module exposing statement.

The user would still need to account for the generalized message handling so the example would look something like this

update msg ({ percentageSlider, timeSlider } as model) =
    case msg of
        PercentageSliderMsg m ->
          case m of
            DragEnd _ ->
              -- do whatever you need to do on drag end and return (Model, Cmd)
            _ ->
              let 
                updatedModel = RangeSlider.update m percentageSlider
              in
                ( Model updatedModel timeSlider, Cmd.none )

I'm sure the above can be refactored.

I've already cloned, updated and tested this (manually) and will have a PR soon.

When switching to a mobile device the slider fails to work.

I have an example on ellie
https://ellie-app.com/bWV3GtbNgPpa1

If you switch your browser to mobile then you'll see you cannot use the slider.

I tried this but it didnt work

onMouseDown : (Drag -> RangeDrag) -> Attribute Msg
onMouseDown createRangeDrag =
    let
        _ = Debug.log "moused" "moused"
    in
        Html.Styled.Events.on "mousedown" <| Json.Decode.map (DragStart createRangeDrag) position


onTouchDown : (Drag -> RangeDrag) -> Attribute Msg
onTouchDown createRangeDrag =
    let
        _  = Debug.log "touched" "this has been touched"
    in
        Html.Styled.Events.on "touchstart" <| Json.Decode.map (DragStart createRangeDrag) position

and

        handle value dragCmd =
            span [ onMouseDown dragCmd, onTouchDown dragCmd, css [ Css.position Css.absolute, positionFromValue value, handleTop ], class (cssNamespace ++ "handle") ] []

however in a regular browser mode both events are fired