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