elm-slider

elm install carwow/elm-slider

Usage

You can create a double slider model which handles values from min to max with a step, providing two thumbs with with values lowValue and highValue.

    let
        initialSliderModel =
            DoubleSlider.defaultModel
    in
        { initialSliderModel
            | min = 50
            , max = 5000
            , step = 50
            , lowValue = 50
            , highValue = 5000
        }

Default formatters for the min, max and current range will be applied unless custom formatters are provided as the following:

    let
        initialSliderModel =
            DoubleSlider.defaultModel
    in
        { initialSliderModel
            | min = 50
            , max = 5000
            , step = 50
            , lowValue = 50
            , highValue = 5000
            , minFormatter = toString
            , maxFormatter = toString
            , currentRangeFormatter = customRangeFormatter
        }

where:

    customRangeFormatter : Float -> Float -> Float -> Float -> String
    customRangeFormatter lowValue highValue min max =
        ...

You can create a single slider model which handles values from min to max with a step and a value.

    let
        initialSliderModel =
            SingleSlider.defaultModel
    in
        { initialSliderModel
            | min = 50
            , max = 5000
            , step = 50
            , value = 2000
        }

Default formatters for the min, max and current value will be applied unless custom formatters are provided as the following:

    let
        initialSliderModel =
            SingleSlider.defaultModel
    in
        { initialSliderModel
            | min = 50
            , max = 5000
            , step = 50
            , lowValue = 50
            , highValue = 5000
            , minFormatter = toString
            , maxFormatter = toString
            , currentValueFormatter = customValueFormatter
        }

where:

    customValueFormatter : Float -> Float -> String
    customValueFormatter currentValue max =
        ...

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

subscriptions =
    Sub.map SliderMsg <|
            DoubleSlider.subscriptions model.slider

Handle the updates from the subscription in your main update function. Together with the new model and a command the sliders update function returns also a boolean, which is false for all dragging updates and true when the dragging stops. This is useful if you want to trigger expensive commands like api calls only after the dragging has stopped.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SliderMsg innerMsg ->
            let
                ( newSlider, cmd, updateResults ) =
                    DoubleSlider.update innerMsg model slider

                newModel =
                    { model | slider = newSlider }

                newCmd =
                    if updateResults then
                        Cmd.batch [ Cmd.map SliderMsg cmd, otherCmd ]
                    else
                        otherCmd
            in
                ( newModel, newCmd )

To view the slider, simply call the view function

DoubleSlider.view model.slider |> Html.map SliderMsg

On mobile we suggest to use the fallbackView as view doesn't handle touchEvents

DoubleSlider.fallbackView model.slider |> Html.map SliderMsg

Example

module Thing exposing (init, update, subscriptions, view, Model, Msg)

import Html exposing (Html, div, text)
import SingleSlider as Slider exposing (..)

type alias Model =
  { slider : Slider.Model
  }

slider : Slider.Model
slider =
  let
    initialSlider =
      Slider.defaultModel
  in
    { initialSlider
        | min = 0
        , max = 10
        , step = 1
        , value = 0
    }

initialModel : Model
initialModel =
  { slider = slider
  }

type Msg
  = SliderMsg Slider.Msg


-- INIT
init : (Model, Cmd Msg)
init =
  (initialModel, Cmd.none)


-- UPDATE
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    SliderMsg sliderMsg ->
      let
        ( newSlider, cmd, updateResults ) =
          Slider.update sliderMsg model.slider

        newModel =
          { model | slider = newSlider }

        newCmd =
          if updateResults then
            Cmd.batch [ Cmd.map SliderMsg cmd, Cmd.none ]
          else
            Cmd.none
      in
        ( newModel, newCmd )


-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.batch
    [ Sub.map SliderMsg <|
      Slider.subscriptions model.slider
    ]


-- VIEW
view : Model -> Html Msg
view model =
  div
    []
    [ Slider.view model.slider |> Html.map SliderMsg ]

Css

[...]