The slider component allows the user to move one or two thumb elements along a vertical or horizontal axis to select a value or range. slider is also considered an input field and must work within a <form> as other input fields do.
There is a standard input for sliders, <input type="range"/>, but it doesn't support the full level of detail, styling, etc that most design systems need or require. For this reason a hidden input is created to support form input operations but not visible. For context please see MDN Docs and caniuse.
-
A customer using the component on a web page. On a web page the customer drags the slider from min to max values ultimately setting the value of the component to a value constrained by step and min and max values.
-
A developer building an app with the component and interacting through HTML/CSS/JavaScript. A developer can inject labels on the slider into the default slot, if they use
slider-labelelements those will be styled a specific way internally and any part of that style can be overridden. Styles and items intending to be placed in the default slot can be replaced as needed. -
A designer customizing the component. A designer can override any internal styling applied to the slotted labels, the track, the progress track and the thumb(s) if appropriate.
- Implement your own thumb UI, default provided
- Implement your own slider track and progress track UI, default provided
- Handle the
slider'schangecallback to be notified when the value has changed. - Customize the tick marks along the track
- Include slider in form based operations
- Utilize
modeattribute to allow the slider to operate in different configurations,single-value,range,adjust-from-lowerandadjust-from-upper. *proposing that for the initial spec we start with supportingsingle-valueonly.
Component Name:
fast-slider
Attributes:
min- minimum allowed value for the slidermax- maximum allowed value for the sliderstep- limits the values of thesliderto increments of thestepvalue added to the minimum value of theslider's total range. The default value is 1. The minimum and maximum values of aslider's range are always valid results regardless of thestepprop. Thestepprop is used as the value for incrementing the thumb by pressing the arrow keys.value- Allows authors to specify the initial selected range of theslider. It defaults to a (step constrained) value at the midpoint on theslider's total range. Inrangemodevalueis expected to be a 2 element array where the lower value is the first value and upper value is the second.orientation- horizontal or vertical values allowed. Note that if the slider is in vertical orientation by default the component will get a height using the css var--fast-slider-height, by default that equates to(10px * var(--thumb-size))or 160px. Inline style will override that height.mode-single-value|range|adjust-from-upper|adjust-from-lower.adjust-from-upperandadjust-from-lowerare special single value modes where a progress indicator is shown on the right or left of the thumb respectively.rangemode produces a lower and upper thumb that can be adjusted independently producing a progress indicator (foreground-track) in between the two thumbs.
Events
change- raise the change event for external parties to be informed of theslider's value change.
Slots
track- thehorizontalorverticaltrack along which the thumb slidesprogress-track- the progress indicator forrange,adjust-from-upperandadjust-from-lowermodes.thumb- the control the user drags along the track to change the value of the sliderlower-thumb- same asthumbexcept used only inrangemode.upper-thumb- same asthumbexcept used only inrangemode.defaultslot - Providing child elements to thefast-sliderwill be hosted in the default slot and presented as track labels. Seefast-slider-labelbelow.
Structure:
<template
role="slider"
>
<div
part="slider"
class="slider"
>
<div part="layout-region" class="layout-region">
<div part="track-container" class="track">
<slot name="track"></slot>
</div>
<div part="progress-track" class="progress-track">
<slot name="progress-track"></slot>
</div>
<div part="thumb-container" class="thumb-container">
<slot name="thumb"><div class="thumb-cursor"></div></slot>
</div>
<div part="lower-thumb-container" class="lower-thumb-container">
<slot name="lower-thumb"><div class="lower-thumb-cursor"></div></slot>
</div>
<div part="upper-thumb-container" class="upper-thumb-container">
<slot name="upper-thumb"><div class="upper-thumb-cursor"></div></slot>
</div>
<slot></slot>
</div>
</div>
</template><fast-slider
value="50"
min="0"
max="100"
step="10"
>
<div slot="thumb"><svg path="..."/></div>
<fast-slider-label
label="50"
show-mark="false"
>
</fast-slider-label>
</fast-slider>Slider are RTL compliant and support the following aria best practices for sliders W3C aria-practices
While testing is still TBD for our web components, I would expect this to align with the testing strategy and not require any additional test support.
The slider-label component provides a default styled label to be placed inside a slider component. Users can choose to hide the mark as well as provide custom label content.
- A designer customizing the component. If they use elements those will be styled a specific way internally and the dev can override any part of that style they want.
Component Name
slider-label
Attributes
hide-mark- boolean to show/hide the mark. Default is false.position- used to position the label at the corresponding value on the track
Slots
label- replace the label with your dom
Parts
label- style the label shown under the mark
Structure:
<div
part="slider-label"
class="slider-label"
style=${x => x.positionStyle}
>
<div class="slider-label-container">
${when(
x => bool(x.hideMark),
html`
<div class="mark">
</div>
`
)}
<div class="label-positioner">
<slot name="label">
<span part="label" class="label"}>
${x => x.label}
</span>
</slot>
</div>
</div>
</div><fast-slider-label
hide-mark="true"
position="0"
>
<svg path="..."></svg>
</fast-slider-label>