Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Slider

A slider allows users to select a single value within a given range of values.

Status: In progress

Anatomy

  1. Label
  2. Required indicator
  3. Thumb
  4. Track
  5. Value
  6. State indicator
  7. Indicator
  8. Helper text

Variants

Label

A slider should always include a concise and clearly understood label. However, labels are not required if an adjacent label is included that adequately describes the purpose of the slider and is correctly referenced to the field for accessibility purposes.

Don't
Do not wrap labels to multiple lines.

Value

A value can be displayed to convey the number selected within the range of the slider. This value should dynamically update as the thumb is adjusted.

Helper text

Helper text is a great way to eliminate ambiguity by providing additional information about the purpose of the slider. This text may wrap to multiple lines as needed.

Required indicator

The indicator is a preset and styled element within the component, not manually entered as part of the label string. Form elements can be marked as either required or optional.

Required

Optional

Behavior

States

Sliders include the following states:

  • Enabled
  • Focus
  • Hover
  • Active
  • Disabled
  • Error
Enabled
Focus
Hover
Active
Disabled
Error