MDC Slider provides an implementation of the Material Design slider component.

Table of Contents

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

Resources

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

Basic Usage

import Material.Slider exposing (slider, sliderConfig)


type Msg
    = ValueChanged Float


main =
    slider
        { sliderConfig
            | value = 50
            , onChange = Just ValueChanged
        }

Continuous Slider

Custom range values

To set a custom range, set the slider's min and max configuration fields to a Float.

slider { sliderConfig | min = 0, max = 100 }

Using a step value

To allow for quantization of the user input, set the slider's step configuration field to a Float.

slider { sliderConfig | step = 4.5 }

Disabled Slider

To disable a slider, set its disabled configuration field to True. Disabled sliders cannot be interacted with and have no visual interaction effect.

slider { sliderConfig | disabled = True }

Discrete Slider

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

slider { sliderConfig | disabled = True }

Track Markers

To have a discrete slider show track markers, set its displayMarkers configuration field to True.

slider { sliderConfig | displayMarkers = True }