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:

VariantDescriptionRequired?
isDisabledShows Slider in disabled stateRecommended
hasLabelShows a label for the SliderRecommended

Slider elements

Some elements that should be in your Slider component are:

ElementDescriptionRequired?
rootThe root elementRequired
trackThe “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
thumbContainerThe 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
thumbTemplateAn instance of SliderThumb, which serves as the “template” to use to create multiple thumbs, if the Slider is controlling multiple values.Required
labelContainerThe element containing the label for this controlRecommended

SliderThumb Anatomy

SliderThumb Variants

Some variants that your Select component built in Slider should include are:

VariantDescriptionRequired?
isDraggingShows SliderThumb while it is being draggedRecommended
isDisabledShows SliderThumb in disabled stateRecommended

In addition, you should consider styling the following interaction variants:

Interaction VariantDescriptionRequired?
Focus Visible WithinControl is focused via keyboard tabbingRecommended
Focused WithinControl is focusedOptional
HoverControl is hoveredOptional

Slider elements

Some elements that should be in your Slider component are:

ElementDescriptionRequired?
rootThe root elementRequired