Slider usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

Slider allows users to select a value or range of values along a continuous scale by dragging an indicator.

When to use

• To allow users to select an approximate value or range of values from a predefined scale (e.g., volume, brightness, size).
• To give users a visual of where in a scale the value they’re selecting falls.
• For filters that use a numeric range (e.g., price).

When not to use

• When users need to input a precise number. For this use a number field instead.
• When the range of values is too large to be effectively represented visually (e.g., selecting a single value between 1 and 10,000). For this use a number field instead.
• When there is not a clear, linear scale for the range.

Examples

Single value slider

Preview

Volume

50

Code

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

export default function Example() {
  return <Slider label="Volume" defaultValue={50} />;
}

Copy code Open in playground

Range slider

Preview

Price range

30 – 70

Code

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

export default function Example() {
  return <Slider label="Price range" defaultValue={[30, 70]} minValue={0} maxValue={200} />;
}

Copy code Open in playground

With input

Preview

Price range

Code

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

export default function Example() {
  return <Slider label="Price range" defaultValue={[30, 70]} minValue={0} maxValue={200} withInput />;
}

Copy code Open in playground

Show min and max labels

Preview

Price range

0

200

Code

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

export default function Example() {
  return <Slider label="Price range" defaultValue={[30, 70]} minValue={0} maxValue={200} withInput showLabels />;
}

Copy code Open in playground

Formatting and layout

Placement

Sliders can either be left-aligned with the container they are placed in, or for smaller containers they can span the full width of the container. Sliders should always be wide enough to properly accommodate the range they are representing so users can easily select the value they intend.

Spacing

• Sliders should have at least 16px of horizontal and vertical spacing between them and other elements.

Form alignment

Sliders can be used in forms in conjunction with the other form components (single select, checkbox, and radio button for example). Form element width should be determined by the width of the container, not the specific content in the individual element. When sliders are stacked vertically with other elements, all of the components should have consistent widths.

Filter panel alignment

When sliders are used in filter panels, they should always span the entire width of the container. Sliders used in filter bars should not include minimum and maximum labels if there isn’t enough horizontal space for the slider to effectively be used.

Content writing

Field label

• Do provide a label to guide users on what to enter.
• Do use a short description of just one or two words for the label such as “Quantity”.
• Do not format labels in the form of a question such as “How many copies do you want to order?”
• Do not include verbs in your label such as “Enter quantity”.

Minimum and maximum labels

• The minimum and maximum labels should be numerical values only. Do not include any additional text.
• If the range uses a specific unit like currency, that should be included with the minimum and maximum values.

Description

• Do use description text to provide additional information or clarity.
• Do not provide unnecessary description when the purpose of the slider is limited.
• Do write clear and concise description text. Text should be limited to one sentence.
• End the description and error text with a period or equivalent punctuation mark. This helps screen reader users understand where the description and error text ends, and it improves readability for all users.

Error text

• Do provide clear and concise error messaging.
• Do explain the issue and let the user know what they need to do to resolve it. Error messages should always provide users with a solution or a path to resolving the error.
• Error messages should use language that is easily understood rather than complex technical terms.
• End the error message with a period or equivalent punctuation mark. This helps screen reader users understand where the error message ends, and it improves readability for all users.

Behaviors

Default value

Sliders will always have a default value. If there is not a common or suggested value, the default is typically the minimum possible value. For sliders that span both negative and positive values, the default value should be set to 0.

Number fields wrapping

When there is not enough horizontal space for the slider, the number fields will wrap below the slider bar.