Slider API

Import

import { UNSTABLE_Slider as Slider } from '@cimpress-ui/react';

Controlled/uncontrolled usage

This component can be used in a controlled or uncontrolled way.

In the controlled way, this component doesn’t maintain its own internal state, and its value is provided by the parent component. Use the controlled way when you need to be able to change the state of this component in other parts of your application.

In the uncontrolled way, this component maintains its own internal state, and can optionally notify the parent component when its internal state changes. Use the uncontrolled way when you don’t need to change the state of this component in other parts of your application.

Preview
Code

Price range (controlled)

30 – 70

Price range (uncontrolled)

30 – 70

import { UNSTABLE_Slider as Slider, Stack } from '@cimpress-ui/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState([30, 70]);

  return (
    <Stack gap={16}>
      <Slider label="Price range (controlled)" value={value} onChange={setValue} minValue={0} maxValue={200} />
      <Slider label="Price range (uncontrolled)" defaultValue={[30, 70]} minValue={0} maxValue={200} />
    </Stack>
  );
}

Accessibility notes

Slider follows the ARIA slider pattern. See the linked page for a list of available keyboard interactions.

Slider requires a textual label to remain accessible to assistive technologies. See our accessibility guide for more details.

API reference

Slider

Allows users to select one or more values within a range.

ref Section titled “ ref ” Ref<HTMLDivElement>: The ref type for this component.

UNSTABLE_SliderProps<T extends number | number[] = number>

description Section titled “ description ” string: A description for the field. Provides a hint such as specific requirements for what to choose.
value Section titled “ value ” T: The current value (controlled).
defaultValue Section titled “ defaultValue ” T: The default value (uncontrolled).
onChange Section titled “ onChange ” (value: T) => void: Handler that is called when the value changes.
onChangeEnd Section titled “ onChangeEnd ” (value: T) => void: Handler that is called when the slider stops moving.
form Section titled “ form ” string: The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See MDN.
name Section titled “ name ” T extends number[] ? string[] : string: The name of the input element, used when submitting an HTML form. See MDN.
withInput Section titled “ withInput ” boolean: Show input fields for slider values.
showLabels Section titled “ showLabels ” boolean: Show static labels for minimum and maximum values.
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.
label Section titled “ label ” string: The content to display as the label.
aria-label Section titled “ aria-label ” string: Defines a string value that labels the current element.
aria-labelledby Section titled “ aria-labelledby ” string: Identifies the element (or elements) that labels the current element.
aria-describedby Section titled “ aria-describedby ” string: Identifies the element (or elements) that describes the object.
aria-details Section titled “ aria-details ” string: Identifies the element (or elements) that provide a detailed, extended description for the object.
isDisabled Section titled “ isDisabled ” boolean: Whether the whole Slider is disabled.
minValue Section titled “ minValue ” number: The slider's minimum value.

Defaults to 0 .
maxValue Section titled “ maxValue ” number: The slider's maximum value.

Defaults to 100 .
step Section titled “ step ” number: The slider's step value.

Defaults to 1 .

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

Slider API

Import

Controlled/uncontrolled usage

Accessibility notes

API reference

Slider

ref

description

value

defaultValue

onChange

onChangeEnd

form

name

withInput

showLabels

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

label

aria-label

aria-labelledby

aria-describedby

aria-details

isDisabled

minValue

maxValue

step

margin

marginX

marginY

marginTop

marginRight

marginBottom

marginLeft