This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 3.0.0
Committed At 2018-09-01 22:23:45 UTC

Modules

    README

    elm-range-slider

    elm package install stephenreddek/elm-range-slider
    

    Usage

    The RangeSlider.init function creates a default range slider which handles continuous values from 0 to 100. You can override any of the default settings by using the "setters" on the initialized model.

    percentageSlider =
        RangeSlider.init
            |> (setStepSize (Just 5.0))
            |> setFormatter (\value -> (String.fromFloat value) ++ "%")
            |> setExtents -25.0 25.0
            |> setValues -10.0 10.0
    

    Because it uses mouse movements, the range slider requires subscriptions. After initialization, handle the subscriptions.

    subscriptions =
        (\model ->
            Sub.map SliderMsg <| RangeSlider.subscriptions model.slider
        )
    

    Handle the updates from the subscription in your update function

    update : Msg -> Model -> ( Model, Cmd Msg )
    update msg { slider } =
        case msg of
            SliderMsg msg ->
                let
                    updatedModel =
                        RangeSlider.update msg slider
                in
                    ( Model updatedModel, Cmd.none )
    

    To view the slider, simply call the view function

    Html.map SliderMsg <| RangeSlider.view slider
    

    When they're finished inputting values, access the values with the getValues accessor

    (from, to) =
        RangeSlider.getValues model.slider
    

    Example

    Checkout the example to test it or see how to wire it up.

    Css

    The default styles for the range slider can be found in the project repo.

    Change log

    • 3.0.0
      • Removed CssHooks
      • Changed the css namespace to range-slider-