Slider

Slider is dedicated to pointer-driven UI sliding: a draggable track with a thumb. min and max are required — a slider always has a range, because a track cannot be drawn without one. For manual numeric text entry instead of dragging, use Number.

Try it

Usage

const threshold = pp.slider({
  label: "Threshold",
  value: 128,
  min: 0,
  max: 255,
  step: 1,
});

threshold.subscribe((value, details) => {
  renderer.threshold = value;
  if (details.final) saveState();
});

Configuration

interface SliderConfig extends BaseControlConfig {
  value: number;

  min: number;
  max: number;

  step?: number;

  /** Show an editable numeric input beside the track. Defaults to true. */
  showValue?: boolean;

  /** Formats the displayed value. */
  format?: (value: number) => string;
}

interface SliderControl extends ValueControl<number, SliderConfig> {}

Reconfiguration

Because configure() is atomic, you can change the range and value together without ever passing through an invalid state:

threshold.configure({
  min: 20,
  max: 220,
  step: 2,
});

// Range and value swapped as one validated operation.
threshold.configure({
  value: 0.5,
  min: 0,
  max: 1,
  step: 0.01,
});

Formatting

format changes only how the value is displayed — the underlying value stays a plain number:

const opacity = pp.slider({
  label: "Opacity",
  value: 0.5,
  min: 0,
  max: 1,
  step: 0.01,
  format: (value) => `${Math.round(value * 100)}%`,
});

The slider above reads 50% while opacity.get() still returns 0.5.

Without a format, values display with a fixed number of fractional digits — decimals, default 3 — always padded (160.000, 3.100) so the read-out width stays stable while dragging. Read-outs use a monospace, tabular-numeral font. Set decimals to change the precision:

pp.slider({ label: "Size", value: 160, min: 40, max: 320, step: 1, decimals: 0 });

Keyboard

Focus the track and use the keyboard:

• Arrow keys — move by one step (or 1/100 of the range when no step is set)
• Shift + Arrow, PageUp / PageDown — move by ten steps
• Home / End — jump to min / max

Validation & Out-of-Range Behavior

The slider enforces consistent, documented rules:

• min must be less than or equal to max.
• step, when provided, must be positive.
• value must be finite.

Where the boundaries matter:

The rationale: programmatic mistakes should be loud and visible, while pointer and keyboard interaction should stay forgiving.