# Slider

Source: https://design.ritchiebros.com/components/inputs/slider/

A slider is an input people use to select a numeric value within a given range (a minimum and a maximum).

## Figma

The Figma reference for **Slider** will appear here once the design link is added.

## Storybook

Interactive examples for **Slider** will render here once the Storybook link is wired in.

## Best practices

- Always use it with a label, even if the label is visually hidden.
- When visible, the label should communicate the purpose and the values (min, max, step, current).
- Mark the field “(optional)” when the input isn’t required.
- Validate input once the person has finished interacting with the field — not before.
- When the slider has two thumbs, pair it with text fields so both bounds have accessible alternatives.

## Do’s and don’ts

**Do:** Use a short, sentence-case label: “Banner width”.

**Don’t:** Phrase the label as a question or trailing sentence: “What is the saturation value?”, “The banner width is:”.

## Related components

- [TextField](https://design.ritchiebros.com/components/inputs/text-field/)
- [Rating](https://design.ritchiebros.com/components/inputs/rating/)