Proportional Slider

Split a fixed total across colored segments with draggable dividers.

Playground

Open Show controls to change the segment count, step and minimum, and to try read only and disabled.

import { useState } from "react";

import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "agent-1", label: "Agent 1", color: "var(--blue-400)" },
  { id: "agent-2", label: "Agent 2", color: "var(--pink-400)" },
  { id: "agent-3", label: "Agent 3", color: "var(--amber-400)" },
  { id: "agent-4", label: "Agent 4", color: "var(--purple-400)" },
];

export function TrafficSplit() {
  const [value, setValue] = useState([25, 25, 25, 25]);

  return (
    <ProportionalSlider
      aria-label="Traffic split"
      segments={segments}
      value={value}
      onValueChange={setValue}
    />
  );
}

Default

Drag a divider to move share between its two neighbours; the total stays fixed. onValuePreview reports live values while dragging and null on release.

Meera50%Rohan30%Sofia20%

import { useState } from "react";
import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "meera", label: "Meera", color: "var(--blue-400)" },
  { id: "rohan", label: "Rohan", color: "var(--pink-400)" },
  { id: "sofia", label: "Sofia", color: "var(--amber-400)" },
];

export default function ProportionalSliderDefault() {
  const [value, setValue] = useState([50, 30, 20]);
  const [preview, setPreview] = useState<number[] | null>(null);
  const shown = preview ?? value;

  return (
    <div className="flex w-full flex-col gap-3">
      <ProportionalSlider
        aria-label="Voice traffic split"
        segments={segments}
        value={value}
        onValueChange={setValue}
        onValuePreview={setPreview}
      />
      <div className="flex flex-wrap gap-4 text-sm text-fg-secondary">
        {segments.map((segment, index) => (
          <span key={segment.id} className="flex items-center gap-2">
            <span className="size-2 rounded-full" style={{ background: segment.color }} />
            {segment.label}
            <span className="font-medium text-fg tabular-nums">{shown[index]}%</span>
          </span>
        ))}
      </div>
    </div>
  );
}

Segment count

n segments get n − 1 dividers. Past about ten segments, a table of values is easier to read.

import { useState } from "react";
import { ProportionalSlider } from "@smallest-inc/ui";

const colors = [
  "var(--blue-400)",
  "var(--pink-400)",
  "var(--amber-400)",
  "var(--purple-400)",
  "var(--teal-400)",
  "var(--orange-400)",
  "var(--green-400)",
  "var(--cyan-400)",
  "var(--indigo-400)",
  "var(--fuchsia-400)",
];

function segmentsFor(count: number) {
  return colors.slice(0, count).map((color, index) => ({ id: `agent-${index + 1}`, label: `Agent ${index + 1}`, color }));
}

export default function ProportionalSliderSegmentCount() {
  const [two, setTwo] = useState([60, 40]);
  const [four, setFour] = useState([25, 25, 25, 25]);
  const [ten, setTen] = useState(Array.from({ length: 10 }, () => 10));

  return (
    <div className="flex w-full flex-col gap-4">
      <ProportionalSlider aria-label="Two agents" segments={segmentsFor(2)} value={two} onValueChange={setTwo} />
      <ProportionalSlider aria-label="Four agents" segments={segmentsFor(4)} value={four} onValueChange={setFour} />
      <ProportionalSlider aria-label="Ten agents" segments={segmentsFor(10)} value={ten} onValueChange={setTen} />
    </div>
  );
}

Minimum value

By default a segment stops at the value that keeps it minSegmentWidth (8px) wide. Pass minSegmentValue for an explicit floor of 0 or 1.

Default: each segment stays at least 8px wide

A segment can reach 0

Each segment keeps at least 1

import { useState } from "react";
import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "inbound", label: "Inbound", color: "var(--blue-400)" },
  { id: "outbound", label: "Outbound", color: "var(--purple-400)" },
  { id: "callbacks", label: "Callbacks", color: "var(--teal-400)" },
];

export default function ProportionalSliderMinimum() {
  const [auto, setAuto] = useState([50, 30, 20]);
  const [zero, setZero] = useState([50, 30, 20]);
  const [one, setOne] = useState([50, 30, 20]);

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex flex-col gap-2">
        <span className="text-sm text-fg-secondary">Default: each segment stays at least 8px wide</span>
        <ProportionalSlider aria-label="Line capacity" segments={segments} value={auto} onValueChange={setAuto} />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm text-fg-secondary">A segment can reach 0</span>
        <ProportionalSlider
          aria-label="Line capacity"
          segments={segments}
          value={zero}
          onValueChange={setZero}
          minSegmentValue={0}
        />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-sm text-fg-secondary">Each segment keeps at least 1</span>
        <ProportionalSlider
          aria-label="Line capacity"
          segments={segments}
          value={one}
          onValueChange={setOne}
          minSegmentValue={1}
        />
      </div>
    </div>
  );
}

Total and step

total sets what the segments add up to (default 100) and step sets the increment (default 1).

Support line 30 · Sales 20 · Collections 10 of 60 slots

import { useState } from "react";
import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "support", label: "Support line", color: "var(--blue-400)" },
  { id: "sales", label: "Sales", color: "var(--green-400)" },
  { id: "collections", label: "Collections", color: "var(--orange-400)" },
];

export default function ProportionalSliderTotalStep() {
  const [value, setValue] = useState([30, 20, 10]);

  return (
    <div className="flex w-full flex-col gap-3">
      <ProportionalSlider
        aria-label="Concurrent call slots"
        segments={segments}
        value={value}
        onValueChange={setValue}
        total={60}
        step={5}
      />
      <p className="text-sm text-fg-secondary tabular-nums">
        {segments.map((segment, index) => `${segment.label} ${value[index]}`).join(" · ")} of 60 slots
      </p>
    </div>
  );
}

Read only

readOnly draws the split without dividers or handles, for showing a breakdown.

import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "speech", label: "Speech to text", color: "var(--blue-400)" },
  { id: "llm", label: "Language model", color: "var(--purple-400)" },
  { id: "tts", label: "Text to speech", color: "var(--pink-400)" },
  { id: "telephony", label: "Telephony", color: "var(--amber-400)" },
];

export default function ProportionalSliderReadOnly() {
  return (
    <ProportionalSlider
      aria-label="Cost per minute by service"
      className="w-full"
      segments={segments}
      value={[18, 42, 28, 12]}
      readOnly
    />
  );
}

Disabled

disabled keeps the dividers visible but dims the track and ignores input.

import { ProportionalSlider } from "@smallest-inc/ui";

const segments = [
  { id: "meera", label: "Meera", color: "var(--blue-400)" },
  { id: "rohan", label: "Rohan", color: "var(--pink-400)" },
];

export default function ProportionalSliderDisabled() {
  return (
    <ProportionalSlider
      aria-label="Voice traffic split"
      className="w-full"
      segments={segments}
      value={[70, 30]}
      disabled
    />
  );
}

External inputs

Pair the slider with number inputs. Keep a draft while a field has focus and commit it on blur with setSegmentValue, which keeps earlier segments fixed and rebalances the ones after it. Pass strategy: "proportional" to scale all the others instead.

North

East

South

West

import { useState } from "react";
import { Input, Label, ProportionalSlider, setSegmentValue } from "@smallest-inc/ui";

const segments = [
  { id: "north", label: "North", color: "var(--blue-400)" },
  { id: "east", label: "East", color: "var(--pink-400)" },
  { id: "south", label: "South", color: "var(--amber-400)" },
  { id: "west", label: "West", color: "var(--purple-400)" },
];

export default function ProportionalSliderExternalInputs() {
  const [value, setValue] = useState([25, 25, 25, 25]);
  const [preview, setPreview] = useState<number[] | null>(null);
  const [drafts, setDrafts] = useState<Record<number, string>>({});
  const shown = preview ?? value;

  function commit(index: number, raw: string) {
    setDrafts((current) => {
      const next = { ...current };
      delete next[index];
      return next;
    });
    const parsed = Number(raw);
    if (raw.trim() === "" || Number.isNaN(parsed)) return;
    setValue((current) => setSegmentValue(current, index, parsed, { total: 100, step: 1, min: 0 }));
  }

  return (
    <div className="flex w-full flex-col gap-4">
      <ProportionalSlider
        aria-label="Lead routing by region"
        segments={segments}
        value={value}
        onValueChange={setValue}
        onValuePreview={setPreview}
      />
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {segments.map((segment, index) => (
          <div key={segment.id} className="flex flex-col gap-1.5">
            <Label htmlFor={`region-${segment.id}`}>{segment.label}</Label>
            <Input
              id={`region-${segment.id}`}
              inputMode="numeric"
              className="tabular-nums"
              value={drafts[index] ?? String(shown[index])}
              onChange={(event) => setDrafts((current) => ({ ...current, [index]: event.target.value }))}
              onBlur={(event) => commit(index, event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter") event.currentTarget.blur();
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

Best practices

When to use

Use to split a fixed total across a few named parts, such as a traffic split between voices or concurrent call slots between agents.
Use separate inputs or a table past about ten segments, or when every value must be exact.

Behavior

Dragging a divider moves share only between its two neighbours; the total never changes.
Show the values beside the bar. Use onValuePreview for live numbers while dragging; it reports null on release.
Set total and step to the real unit, like total={60} step={5} for call slots.
Pair inputs by keeping a draft on focus and committing on blur with setSegmentValue. The default suffix strategy keeps earlier segments fixed; strategy: "proportional" scales all the others.
Use readOnly to display a breakdown and disabled when the split is locked.

Content

Give every segment a label and a distinct 400-level colour; the label is its accessible name.

Accessibility

Each divider is keyboard adjustable and named from its two neighbours; do not rely on colour alone to tell segments apart.

PreviousPopover NextRadio