elm 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 =
    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

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.

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