This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
Elm range slider
version 1.0.2
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.2
Committed At 2017-09-08 07:52:17 UTC
rtfeldman/elm-css-helpers 2.1.0 <= v < 3.0.0 2.1.0
rtfeldman/elm-css 11.0.0 <= v < 12.0.0 11.2.0
elm-lang/mouse 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

README

elm-range-slider

A range slider built with Elm.

Range slider

Usage

Install

elm package install rkrupinski/elm-range-slider

Import

import Slider.Core as Slider

Initialize

slider : Slider.Model
slider =
    Slider.init
        { size = Just 200
        , values = Just ( 0.1, 0.9 )
        , step = Just 0.1
        }

For the sake of keeping the API as small as possible, the slider only operates on values within ( 0, 1 ) range. If that's not the case with your code, convert the values manually or check what the Slider.Helpers module has got for you:

import Slider.Helpers exposing (..)
slider : Slider.Model
slider =
    Slider.init
        { size = Just 200
        , values = Just ( parseValue 0, parseValue 5 )
        , step = Just <| parseStep 1
        }

Update

Handle updating the slider in your update function:

case msg of
    SliderMsg sliderMsg ->
        let
            ( slider, cmd ) =
                Slider.update sliderMsg model.slider
        in
            { model | slider = slider } ! [ Cmd.map SliderMsg cmd ]

Render

Render the slider using:

Html.map SliderMsg <| Slider.view model.slider

Subscriptions

The slider requires subscriptions to work (due to its dependency on the Mouse package). Once the slider is initialized, get the required subscriptions using:

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

Read values

Read the current values using:

Slider.getValues model.slider

Again, this function returns a tuple of Floats within ( 0, 1 ) range. If that doesn't work for you, convert the values based on your range. And of course, the Slider.Helpers module has got you covered:

import Slider.Helpers exposing (..)
renderValues : Slider.Range -> Slider.Values -> Html Msg
renderValues range ( left, right ) =
    let
        formatValue : Float -> String
        formatValue =
            valueFormatter range >> toString

        left_ : String
        left_ =
            formatValue left

        right_ : String
        right_ =
            formatValue right
    in
        text <| left_ ++ ", " ++ right_

Styling

The Slider.Styles module contains basic default styles to get you up and running. Use the Slider.ClassNames module to generate your custom styles with elm-css.

Examples

Check out the example to see how to make it all work. Additionally, the example-webpack directory contains a webpack-based setup.