Designing a Plume Slider
The Slider
component implements a theme-able <input type="range"/>
replacement. It presents controls for specifying an array of numeric values by dragging them along a track.
There are two Plasmic components used to build out a Plume Slider:
- A
Slider
component, which contains the track, the label, and a container for SliderThumbs. - A
SliderThumb
component, which is the thing you drag along the slider.
A Slider
can have an arbitrary number of thumbs! In your Plasmic component for a Slider, you should have a single instance of a SliderThumb as the “template”; Plume will then instantiate one of these for each value of the slider.
Slider Anatomy
Slider Variants
Some variants that your Select component built in Slider should include are:
Variant | Description | Required? |
---|---|---|
isDisabled | Shows Slider in disabled state | Recommended |
hasLabel | Shows a label for the Slider | Recommended |
Slider elements
Some elements that should be in your Slider component are:
Element | Description | Required? |
---|---|---|
root | The root element | Required |
track | The “track” element of the Slider. When the user clicks on or drags on the track, the closest thrumb will be dragged along. The length of this element is also the length of the draggable area for the thumbs. | Required |
thumbContainer | The element that will contain all thumb elements. In Plasmic, this element should contain a single “thumbTemplate” element, which will be duplicated once for each value of the slider. This element will be emptied out except for the thumbs, so make sure nothing important is in this element besides the thumbTemplate. | Required |
thumbTemplate | An instance of SliderThumb, which serves as the “template” to use to create multiple thumbs, if the Slider is controlling multiple values. | Required |
labelContainer | The element containing the label for this control | Recommended |
SliderThumb Anatomy
SliderThumb Variants
Some variants that your Select component built in Slider should include are:
Variant | Description | Required? |
---|---|---|
isDragging | Shows SliderThumb while it is being dragged | Recommended |
isDisabled | Shows SliderThumb in disabled state | Recommended |
In addition, you should consider styling the following interaction variants:
Interaction Variant | Description | Required? |
---|---|---|
Focus Visible Within | Control is focused via keyboard tabbing | Recommended |
Focused Within | Control is focused | Optional |
Hover | Control is hovered | Optional |
Slider elements
Some elements that should be in your Slider component are:
Element | Description | Required? |
---|---|---|
root | The root element | Required |