color-kitnext

@pbroom/color-kit/driverSlider gradient

getSliderGradientStyles

Samples a slider gradient (see sampleSliderGradient) and formats it as CSS linear-gradient() strings.

functionimport { getSliderGradientStyles } from '@pbroom/color-kit/driver';slider-gradient.ts:440
function getSliderGradientStyles(
  options: SampleSliderGradientOptions,
): SliderGradientStyles;

The direction is to right for horizontal sliders and to top for vertical ones, so range[0] sits at the left or bottom. Stop positions are percentages with three decimals. activeBackgroundImage uses the colorSpace stops (color(display-p3 …) by default); srgbBackgroundImage and srgbBackgroundColor are sRGB fallbacks for browsers or displays without Display P3.

Parameters

optionsSampleSliderGradientOptions

Returns

SliderGradientStyles

Throws

  • When steps is non-finite or below 2.

Example

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

const styles = getSliderGradientStyles({
  model: 'oklch',
  channel: 'l',
  baseColor: { l: 0.7, c: 0.15, h: 30, alpha: 1 },
  range: [0, 1],
  steps: 2,
  colorSpace: 'srgb',
});
styles.activeBackgroundImage;
// → 'linear-gradient(to right, rgb(0 0 0) 0.000%, rgb(168 55 42) 50.000%, rgb(255 255 255) 100.000%)'
styles.srgbBackgroundColor; // → 'rgb(0 0 0)'