https://github.com/stephenreddek/elm-range-slider

A range slider built for elm
https://github.com/stephenreddek/elm-range-slider

elm hacktoberfest

Last synced: about 4 hours ago
JSON representation

A range slider built for elm

• Host: GitHub
• URL: https://github.com/stephenreddek/elm-range-slider
• Owner: stephenreddek
• License: bsd-3-clause
• Created: 2016-10-31T23:37:15.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-12-28T06:24:10.000Z (about 4 years ago)
• Last Synced: 2024-10-01T09:19:46.739Z (4 months ago)
• Topics: elm, hacktoberfest
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/stephenreddek/elm-range-slider/latest
• Size: 48.8 KB
• Stars: 7
• Watchers: 3
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-range-slider

```shell

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

```elm

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.

```elm

subscriptions =

    (\model ->

        Sub.map SliderMsg <| RangeSlider.subscriptions model.slider

    )

```

Handle the updates from the subscription in your update function

```elm

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

```elm

Html.map SliderMsg <| RangeSlider.view slider

```

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

```elm

(from, to) =

    RangeSlider.getValues model.slider

```

## Example

Checkout the [example](https://github.com/stephenreddek/elm-range-slider/tree/master/example "elm-range-slider 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](https://github.com/stephenreddek/elm-range-slider/tree/master/css "elm-range-slider Github").

## Change log

* 3.0.0

    * Removed CssHooks

    * Changed the css namespace to `range-slider-`