stephenreddek / elm-range-slider Goto Github PK
View Code? Open in Web Editor NEWA range slider built for elm
Home Page: http://package.elm-lang.org/packages/stephenreddek/elm-range-slider/latest
License: BSD 3-Clause "New" or "Revised" License
A range slider built for elm
Home Page: http://package.elm-lang.org/packages/stephenreddek/elm-range-slider/latest
License: BSD 3-Clause "New" or "Revised" License
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.