useSliderThumb

The useSliderThumb hook implements interactivity and accessibility for a SliderThumb. A SliderThumb is a handle that can be dragged along on a Slider. You probably should never instantiate an instance of SliderThumb directly.

Arguments

The useSliderThumb hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeSliderThumbProps
configPlumeSliderThumb Configuration for this component
refInstance of PlumeSliderThumbRef providing programmatic access

Return value

The useSliderThumb hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateSliderState

Plume Config

KeyDescriptionRequired?
isDraggingVariantVariant to activate when the SliderThumb is being draggedOptional
isDisabledVariantVariant to activate when the SliderThumb is disabled, according to props.isDisabledRecommended
rootName of the root element of the component; will have an invisible <input type="range"/> injected, and also be absolutely positioned along the trackRequired

Example

interface SliderThumbProps extends PlumeSliderThumbProps {

}
function SliderThumb_(
  props: SliderThumbProps,
  ref: PlumeSliderThumbRef
) {
  const {plumeProps, state} = useSliderThumb(
    PlasmicSliderThumb,
    props,
    {
      isDraggingVariant: ["isDragging", "isDragging"],
      isDisabledVariant: ["isDisabled", "isDisabled"],

      root: "root",
    },
    ref
  );
  return (
    <PlumeSliderThumb
      {...plumeProps}

      // We also put the formatted value of the thumb into a
      // tooltip slot in this example
      tooltip={state.getThumbValueLabel(props.index)}
    />
  );
}

const SliderThumb = React.forwardRef(SliderThumb_);
export default SliderThumb;

React-Aria

Implemented using useSliderThumb and useSliderState.