color-kitnext

@pbroom/color-kit/driverColor slider

normalizeColorSliderPointer

Converts a pointer coordinate into a clamped [0, 1] track position. Horizontal tracks grow left to right; vertical tracks grow bottom to top (the returned value is inverted from the client y axis).

functionimport { normalizeColorSliderPointer } from '@pbroom/color-kit/driver';color-slider.ts:230
function normalizeColorSliderPointer(
  orientation: ColorSliderOrientation,
  pointer: number,
  start: number,
  size: number,
  positionInset?: number,
): number;

Parameters

orientationColorSliderOrientation
pointernumber
Pointer client coordinate: clientX for horizontal, clientY for vertical.
startnumber
Track start in client pixels: rect.left or rect.top.
sizenumber
Track length in pixels: rect.width or rect.height.
positionInset?numberdefault 0
Pixels trimmed from both track ends (e.g. the thumb radius), clamped to size / 2. Returns 0 when nothing is left.

Returns

number

Example

TypeScript
import { normalizeColorSliderPointer } from '@pbroom/color-kit/driver';

normalizeColorSliderPointer('horizontal', 150, 100, 200); // → 0.25
normalizeColorSliderPointer('vertical', 150, 100, 200); // → 0.75
normalizeColorSliderPointer('horizontal', 110, 100, 200, 10); // → 0