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

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Continuous Slider
• Custom range values
• Using a step value
• Disabled Slider
• Discrete Slider
  • Track Markers
• Focus a Slider

Resources

• Demo: Sliders
• Material Design Guidelines: Sliders
• MDC Web: Slider
• Sass Mixins (MDC Web)

Basic Usage

import Material.Slider as Slider


type Msg
    = ValueChanged Float


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

Configurations

Configuration Options

Continuous Slider

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" ]
    )