aforemny/material-components-web-elm/6.0.0

NOTE: the latest version is 9.1.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.

What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/

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 (Just 50)
            |> Slider.setOnInput ValueChanged
        )

Configurations

type Config msg

Configuration of a slider

Default configuration of a slider

Configuration Options

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

Specify a message when the user interacts with the slider

setDiscrete : 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 : Bool -> Config msg -> Config msg

Specify whether a slider should display markers

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

setMin : Maybe Float -> Config msg -> Config msg

Specify a slider's minimum value

setMax : Maybe Float -> Config msg -> Config msg

Specify a slider's maximum value

setStep : Maybe Float -> Config msg -> Config msg

Specify a slider's step value

setValue : Maybe Float -> Config msg -> Config msg

Specify a slider's value

setDisabled : 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 (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 (Just 0)
        |> Slider.setMax (Just 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 (Just 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" ]
    )