Slider (slider)
MDC Slider provides an implementation of the Material Design slider component. It is modeled after the browser's <input type="range"> element. Sliders are fully RTL-aware, and conform to the WAI-ARIA slider authoring practices.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| label | Label | Not displayed. For accessibility. | |
| value | Value |
|
|
| value_end | End value (for range only) |
|
|
| min | Minimum |
|
|
| max | Maximum |
|
|
| name | Machine name |
|
id: slider
label: Slider
description: 'MDC Slider provides an implementation of the Material Design slider component. It is modeled after the browser''s <input type="range"> element. Sliders are fully RTL-aware, and conform to the WAI-ARIA slider authoring practices. '
homepage: 'https://m2.material.io/develop/web/components/sliders'
variants:
default:
id: default
label: 'Default (Continuous)'
range:
id: range
label: 'Continuous range'
discrete:
id: discrete
label: Discrete
description: 'Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to select an exact value.'
discrete__tick_marks:
id: discrete__tick_marks
label: 'Discrete with tick marks'
range__discrete:
id: range__discrete
label: 'Discrete range'
range__discrete__tick_marks:
id: range__discrete__tick_marks
label: 'Discrete range'
disabled:
id: disabled
label: Disabled
slots:
label:
id: label
label: Label
description: 'Not displayed. For accessibility.'
props:
value:
id: value
label: Value
schema:
type: number
value_end:
id: value_end
label: 'End value (for range only)'
schema:
type: number
min:
id: min
label: Minimum
schema:
type: number
max:
id: max
label: Maximum
schema:
type: number
name:
id: name
label: 'Machine name'
schema:
type: string
library:
js:
'https://data.dilla.io/material_2/components/slider/slider_init.js': { }
id: slider
examples:
preview:
id: preview
label: Preview
renderable:
'@component': slider
label: 'Continuous slider demo'
value: 50
value_end: 70
max: 100
name: volume
Default (Continuous)
(
default
)
Continuous range
(
range
)
Discrete
(
discrete
)
Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to select an exact value.