aforemny / material-components-web-elm / Material.Slider

Slider provides a component to select a numerical value within a range.

Table of Contents

Resources

Basic Usage

import Material.Slider as Slider

type Msg
    = ValueChanged Float

main =
    Slider.slider
        (Slider.config
            |> Slider.setValue 50
            |> Slider.setOnInput ValueChanged
        )

Configurations


type Config msg

Configuration of a slider

config : Config msg

Default configuration of a slider

Configuration Options

setOnInput : (Basics.Float -> msg) -> Config msg -> Config msg

Specify a message when the user interacts with the slider

setDiscrete : Basics.Bool -> Config msg -> Config msg

Specify whether a slider is discrete

Discrete sliders feature a pin that indicates the current value while interacting with the slider.

This works best for integer-valued sliders, but this is not a requirement.

setDisplayMarkers : Basics.Bool -> Config msg -> Config msg

Specify whether a slider should display markers

Note that this option is ignored by non-discrete sliders.

setMin : Basics.Float -> Config msg -> Config msg

Specify a slider's minimum value

setMax : Basics.Float -> Config msg -> Config msg

Specify a slider's maximum value

setStep : Basics.Float -> Config msg -> Config msg

Specify a slider's step value

setValue : Basics.Float -> Config msg -> Config msg

Specify a slider's value

setDisabled : Basics.Bool -> Config msg -> Config msg

Specify whether a slider is disabled

Disabled sliders canot be interacted with and have no visual interaction effect.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Continuous Slider

slider : Config msg -> Html msg

Slider view function

Custom range values

To set a custom range, use the slider's setMin and setMax configuration options.

Slider.slider
    (Slider.config
        |> Slider.setMin 0
        |> Slider.setMax 100
    )

Using a step value

To allow for quantization of the user input, use the slider's setStep configuration option.

Slider.slider (Slider.config |> Slider.setStep 4.5)

Disabled Slider

To disable a slider, set its setDisabled configuration option to True.

Disabled sliders cannot be interacted with and have no visual interaction effect.

Slider.slider (Slider.config |> Slider.setDisabled True)

Discrete Slider

To treat a slider as a discrete slider, set its setDiscrete configuration option to True.

Slider.slider (Slider.config |> Slider.setDiscrete True)

Track Markers

To have a discrete slider show track markers, set its setDisplayMarkers configuration option to True.

Note that non-discrete sliders ignore this configuration option.

Slider.slider
    (Slider.config |> Slider.setDisplayMarkers True)

Focus a Slider

You may programatically focus a slider by assigning an id attribute to it and use Browser.Dom.focus.

Slider.slider
    (Slider.config
        |> Slider.setAttributes
            [ Html.Attributes.id "my-slider" ]
    )