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 11.1.5
Committed At 2020-05-29 08:46:39 UTC

Modules

    README

    elm-slider

    A range slider component, implemented natively in Elm.

    Installation

    elm install carwow/elm-slider
    

    Usage

    For a full example implementation, see examples/Main.elm

    There are two types of sliders that can be rendered, a SingleSlider, with one track thumb and a DoubleSlider, with two track thumbs.

    Input handling is your responsibility - define a function to decided what to do when the slider's value changes.

    SingleSlider Example

    singleSlider =
        SingleSlider.init
            { min = 0
            , max = 1000
            , value = 500
            , step = 50
            , onChange = SingleSliderChange
            }
              
              
    type Msg
        = NoOp
        | SingleSliderChange Float
    
    
    view : Model -> Html Msg
    view model =
        div []
            [ div [] [ SingleSlider.view model.singleSlider ] ]
    

    DoubleSliderExample

    doubleSlider =
        DoubleSlider.init
            { min = 0
            , max = 1000
            , lowValue = 500
            , highValue = 750
            , step = 50
            , onLowChange = DoubleSliderLowChange
            , onHighChange = DoubleSliderHighChange
            }
    
    
    type Msg
        = NoOp
        | DoubleSliderLowChange Float
        | DoubleSliderHighChange Float
            
    
    view : Model -> Html Msg
    view model =
        div []
            [ div [] [ DoubleSlider.view model.doubleSlider ] ]
    

    Using a custom formatter

    You can use a custom min label formatter, max label formatter, or value formatter like below:

    singleSlider =
          SingleSlider.init
              { min = 0
              , max = 1000
              , value = 500
              , step = 50
              , onChange = handleSingleSliderChange
              }
              |> SingleSlider.withMinFormatter minFormatter
    

    CSS

    Example CSS for the slider components is provided at examples/example.css

    It is recommended to start with these styles and override them according to the theme of your website.