slider.md

Slider

Slider component is a form element used to select a number by sliding through the given range with complete freedom of styling. It follows WAI-ARIA Slider Pattern for the keyboard navigation & accessibility properties. Supports all the features as React Aria's useSlider.

Table of Contents

• Usage
• Other Examples
• Composition
• Props
  • SliderOptions
  • SliderBaseStateProps
  • SliderInputOptions
  • SliderLabelOptions
  • SliderOutputOptions
  • SliderStateProps
  • SliderThumbOptions
  • SliderThumbStateProps
  • SliderTrackOptions

Usage

import * as React from "react";

import {
  Slider,
  SliderThumb,
  SliderTrack,
  useSliderBaseState,
  useSliderState,
  useSliderThumbState,
} from "@adaptui/react";

export const SliderBasic = props => {
  const { label } = props;
  const sliderLabel = `${label ? label : "Styled"} Slider`;
  const state = useSliderBaseState(props);
  const slider = useSliderState({ ...props, "aria-label": sliderLabel, state });
  const { getValuePercent, values } = state;

  return (
    <Slider className="chakra-slider-group" state={slider}>
      <div className="slider">
        <SliderTrack state={slider} className="slider-track-container">
          <div className="slider-track" />
          <div
            className="slider-filled-track"
            style={{ width: `${getValuePercent(values[0]) * 100}%` }}
          />
        </SliderTrack>

        <Thumb
          index={0}
          state={state}
          orientation={props.orientation}
          isDisabled={props.isDisabled}
          trackRef={slider.trackRef}
          aria-label="Thumb"
        />
      </div>
    </Slider>
  );
};

export default SliderBasic;

export const Thumb = props => {
  const sliderThumb = useSliderThumbState(props);
  const { index } = props;
  const { getThumbPercent, getThumbValueLabel } = props.state;

  return (
    <div
      className="slider-thumb"
      style={{ left: `calc(${getThumbPercent(index) * 100}% - 7px)` }}
    >
      <SliderThumb state={sliderThumb} className="slider-thumb-handle" />
      <div className="slider-thumb-tip">{getThumbValueLabel(index)}</div>
    </div>
  );
};

Other Examples

Composition

• Slider uses Role
• useSliderBaseState uses useSliderState
• SliderInput uses Role
• SliderLabel uses Role
• SliderOutput uses Role
• useSliderState uses its own state
• SliderThumb uses Role
• useSliderThumbState uses its own state
• SliderTrack uses Role

Props

SliderOptions

Name	Type	Description
state	SliderState	Object returned by the useSliderState hook.

SliderBaseStateProps

Name	Type	Description
formatOptions	NumberFormatOptions | undefined	The display format of the value label.

SliderStateProps props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
orientation	Orientation | undefined	The orientation of the Slider.
isDisabled	boolean | undefined	Whether the whole Slider is disabled.
onChangeEnd	((value: T) => void) | undefined	Fired when the slider stops moving, due to being let go.
minValue	number | undefined	The slider's minimum value.
maxValue	number | undefined	The slider's maximum value.
step	number | undefined	The slider's step value.
value	T | undefined	The current value (controlled).
defaultValue	T | undefined	The default value (uncontrolled).
onChange	((value: C) => void) | undefined	Handler that is called when the value changes.
label	ReactNode	The content to display as the label.

SliderInputOptions

Name	Type	Description
state	SliderThumbState	Object returned by the useSliderState hook.

SliderLabelOptions

Name	Type	Description
state	SliderState	Object returned by the useSliderState hook.

SliderOutputOptions

Name	Type	Description
state	SliderState	Object returned by the useSliderState hook.

SliderStateProps

Name	Type	Description
id	string | undefined	The element's unique identifier. See MDN.
aria-label	string | undefined	Defines a string value that labels the current element.
aria-labelledby	string | undefined	Identifies the element (or elements) that labels the current element.
aria-describedby	string | undefined	Identifies the element (or elements) that describes the object.
aria-details	string | undefined	Identifies the element (or elements) that provide a detailed, extended description for the object.
state	SliderState	Object returned by the useSliderBaseState hook.

SliderThumbOptions

Name	Type	Description
state	SliderThumbState	Object returned by the useSliderThumbState hook.

SliderThumbStateProps

Name	Type	Description
index	number	Index of the thumb for accessing purposes.
autoFocus	boolean | undefined	Whether the element should receive focus on render.
onFocus	((e: FocusEvent<Element, Element>) => void) | u...	Handler that is called when the element receives focus.
onBlur	((e: FocusEvent<Element, Element>) => void) | u...	Handler that is called when the element loses focus.
onFocusChange	((isFocused: boolean) => void) | undefined	Handler that is called when the element's focus status changes.
onKeyDown	((e: KeyboardEvent) => void) | undefined	Handler that is called when a key is pressed.
onKeyUp	((e: KeyboardEvent) => void) | undefined	Handler that is called when a key is released.
validationState	ValidationState | undefined	Whether the input should display its "valid" or "invalid" visual styling.
isRequired	boolean | undefined	Whether user input is required on the input before form submission.Often paired with the necessityIndicator prop to add a visual indicator to the input.
id	string | undefined	The element's unique identifier. See MDN.
excludeFromTabOrder	boolean | undefined	Whether to exclude the element from the sequential tab order. If true,the element will not be focusable via the keyboard by tabbing. This shouldbe avoided except in rare scenarios where an alternative means of accessingthe element or its functionality via the keyboard is available.
aria-label	string | undefined	Defines a string value that labels the current element.
aria-labelledby	string | undefined	Identifies the element (or elements) that labels the current element.
aria-describedby	string | undefined	Identifies the element (or elements) that describes the object.
aria-details	string | undefined	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-errormessage	string | undefined	Identifies the element that provides an error message for the object.
trackRef	RefObject<HTMLElement>	A ref to the track element.
state	SliderState	Object returned by the useSliderBaseState hook.

SliderTrackOptions

Name	Type	Description
state	SliderState	Object returned by the useSliderState hook.