useSlider

The useSlider hook implements interactivity and accessibility for a Slider component. It is a themable replacement for an <input type="range"/> HTML element.

There is an infinite number of ways for customizing not just how a Slider looks, but also how it works and what information is displayed. Do you want to render the value of the slider thumb? Do you only want to render it when you’re dragging it? Or do you want to render it to the right of the slider? As part of the slide track, do you have a “highlighted” portion from min value to your thumb? Or maybe the “highlighted” portion should always start at 0 and go to where your thumb is, which may be positive or negative? And what if you have two thumbs, say for a range slider? Should your “highlighted” portion just be between the two thumbs? Or what if you have four thumbs? Should there be a highlighted portion all? Does having multiple thumbs change how you want to render the value of each thumb? And what if you want to show tick markers on the track?

Because there are so many ways to customize and style sliders, the useSlider hook does very little visually. For example, while it does position the slider thumbs as a percentage of the track width based on their values, it doesn’t try to position the “highlighted” portion of the track, nor does it try to render the current thumb value anywhere. Instead, it returns the SliderState, which makes it really easy for you to make the slider the way you want by querying for the information you need.

Arguments

The useSlider hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeSliderProps
configPlumeSlider Configuration for this component
refInstance of PlumeSliderRef providing programmatic access

Return value

The useSlider hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateSliderState

Plume Config

KeyDescriptionRequired?
isDisabledVariantVariant to activate when the Slider is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the Slider has a text label, specified as props.label.Recommended; a Slider without label is not accessible
rootName of the root element of the componentRequired
trackName of the track element of the component; when user clicks on or drags on the track, the closest thumb will be dragged along. The length of this element is also the length of the draggable area; the position of each thumb will be expressed as a percentage along the length of this elementRequired
thumbContainerName of the element that contains all thumb elements. Will be emptied and filled with instances of SliderThumb according to the thumbTemplateRequired
thumbTemplateName of the template element for SliderThumbs; will instantiate one for each value in props.value. Should be an instance of PlumeSliderThumb.Required
labelContainerName of the label container for the componentRecommended

Example

interface SliderProps extends PlumeSliderProps {

}
function Slider_(
  props: SliderProps,
  ref: PlumeSliderRef
) {
  const {plumeProps, state} = useSlider(
    PlasmicSlider,
    props,
    {
      isDisabledVariant: ["isDisabled", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

      root: "root",
      track: "track",
      thumbContainer: "thumbContainer",
      thumbTemplate: "thumbTemplate",
      labelContainer: "labelContainer",
    },
    ref
  );

  return (
    <PlasmicSlider
      {...plumeProps}

      // Let's say, we also have a `filledTrack` element that
      // renders the "colored" or "filled in" part of the
      // track.  We need to update it to reflect the current
      // state.
      filledTrack={{
        style: (
          state.values.length === 1 ? {
            // Only one value, so this element should go
            // from 0 to the current value
            left: 0,
            width: `${state.getThumbPercent(0) * 100}%`
          } : state.values.length === 2 ? {
            // Two values, like a range slider, so this
            // element should go between the first and the
            // second values
            left: `${state.getThumbPercent(0) * 100}%`,
            width: `${
              (state.getThumbPercent(1) - state.getThumbPercent(0))
              * 100
            }%`,
          } : {
            // More than 2 values, shouldn't show a filled
            // track at all
            display: "none"
          }
        )
      }}
    />
  );
}

const Slider = React.forwardRef(Slider_);
export default Slider;

React-Aria

Implemented using useSlider and useSliderState.