Tone Sliders

Position your brand’s voice between pairs of opposing traits.

<ToneSliders
  items={[
    { left: "Formal", right: "Conversational", at: 70 },
    { left: "Reserved", right: "Expressive", at: 40 },
  ]}
/>

Usage

Supply one row per pair of traits. A position of 0 sits at the left label, 100 sits at the right label, and 50 sits in the middle.

<ToneSliders items={[{ left: "Formal", right: "Conversational", at: 70 }]} />

Examples

Compare the endpoints and midpoint

Use 0 to align with the left trait, 50 for a balanced position, or 100 to align with the right trait. The rows below use the same labels so you can compare the positions directly.

<ToneSliders
  items={[
    { left: "Formal", right: "Conversational", at: 0 },
    { left: "Formal", right: "Conversational", at: 50 },
    { left: "Formal", right: "Conversational", at: 100 },
  ]}
/>

Reading the scale

These markers communicate editorial positioning; they are static illustrations rather than draggable controls. Each track has an accessible text description of its labels and position. Keep at between 0 and 100: the visual marker clamps out-of-range values, but the accessible description reports the supplied value.

API reference