Slider provides a component to select a numerical value within a range.
import Material.Slider as Slider
type Msg
= ValueChanged Float
main =
Slider.slider
(Slider.config
|> Slider.setValue 50
|> Slider.setOnInput ValueChanged
)
Configuration of a slider
config : Config msg
Default configuration of a slider
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
slider : Config msg -> Html msg
Slider view function
To set a custom range, use the slider's setMin
and setMax
configuration
options.
Slider.slider
(Slider.config
|> Slider.setMin 0
|> Slider.setMax 100
)
To allow for quantization of the user input, use the slider's setStep
configuration option.
Slider.slider (Slider.config |> Slider.setStep 4.5)
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)
To treat a slider as a discrete slider, set its setDiscrete
configuration
option to True
.
Slider.slider (Slider.config |> Slider.setDiscrete True)
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)
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" ]
)