Inputs
Trait Slider
Bipolar personality slider: blue on the left pole, green on the right, quarter ticks, and the resulting trait with its icon.
Source captures·from the SEED early-access trailer
In context
Drag a slider or pick a preset — the trait at the top right follows the thumb.
Personality Traits
Agreeableness
Competitive
CompetitiveSkepticalBenevolent
Conscientiousness
Organized
OrganizedUnselfconsciousMethodical
Extraversion
Extrovert
ExtrovertSolitaryExtrovert
Neuroticism
Easygoing
EasygoingComposedNeurotic
Openness
Inventive
InventiveConventionalInnovative
Single slider
AgreeablenessCompetitive
CompetitiveSkepticalBenevolent
NeuroticismEasygoing
EasygoingComposedNeurotic
Without a trait, and disabled
Openness
ConventionalInnovative
Extraversion
Sociable
SociableSolitaryExtrovert
API
| Prop | Type | Default | Description |
|---|---|---|---|
| dimension | string | — | Label at the top left. |
| startLabel / endLabel | string | — | Pole labels under the track. |
| value / defaultValue | number | 50 | 0–100. |
| onValueChange | (value: number) => void | — | |
| traits | { label: string; icon?: ReactNode }[] | — | Spread evenly across the range; the trait under the thumb is shown. |
| ticks | number[] | [0.25, 0.5, 0.75] | |
| disabled | boolean | false |