Sliders
Slider
This component is used to create an input for controlling a range of values.
Usage
The <media-slider>
component is a custom-built range input that is cross-browser friendly, ARIA friendly, mouse/touch/keyboard-friendly and easily style-able. The slider allows users to input numeric values between a minimum and maximum value.
Other sliders in the library such as <media-time-slider>
and <media-volume-slider>
extend the <media-slider>
component with additional functionality based on their use-case. All documentation on this page, particularly around styling and subscriptions is valid for all sliders.
Preview
The preview
slot enables passing in any element to be displayed above the slider thumb when being interacted with:
Any element you slot in will be sized and positioned automatically by the slider. It will also ensure the preview is correctly clamped so it doesn't go out of bounds.
State
You can retrieve a snapshot of the current slider state like so:
Subscribe
The slider has a store that keeps track of the running slider state. The store enables you to subscribe directly to specific state changes, rather than listening to potentially multiple DOM events and binding it yourself.
Styling
You can override the default styles with CSS like so:
Parts
Focus
Data Attributes
The data attributes listed in the table below are applied to a slider element. You can use the presence, or absence of these attributes to style the slider and any of it's children as desired.
CSS Variables
The CSS variables listed in the table below can be used to style your own slider. The fill
variables represent the current value, and the pointer
variables represent the current value at the device pointer (mouse/thumb).
The slider will also apply the following CSS variables to the element in the preview
slot:
Previews
Tailwind
The following section is for Tailwind CSS users who have installed our Tailwind Plugin.
Data Attributes
All the data attributes listed above can be used like so:
CSS Variables
You can take advantage of arbitrary values if you're using Tailwind CSS v3+ and use the CSS variables listed above.
Exposing Parts
You can expose slider parts and override the default styles using CSS like so:
Example
A complete slider example built with Tailwind:
All of this code is reusable across other slider implementations.
Too verbose? You might prefer overriding the default styles. Remember to load them first if you haven't yet.