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




    elm package install stephenreddek/elm-range-slider


    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 =
            |> (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 ->
   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 ->
                    updatedModel =
                        RangeSlider.update msg slider
                    ( Model updatedModel, Cmd.none )

    To view the slider, simply call the view function SliderMsg <| RangeSlider.view slider

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

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


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


    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-