@vibe-labs/design-components-sliders

Slider, range, and track component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-sliders";

import { SliderSizes, SliderThumbShapes, SliderTrackColors } from "@vibe-labs/design-components-sliders/types";
import type { SliderStyleProps, SliderThumbStyleProps } from "@vibe-labs/design-components-sliders/types";

Contents

Tokens (sliders.css)

Component-specific tokens defined in @layer vibe.tokens. Focus ring tokens (--ring-*) are owned by @vibe-labs/design-elevation. Disabled opacity inherits from @vibe-labs/design-forms.

Track

Token	Default	Description
--slider-track-height-{sm|md|lg}	2px / 4px / 6px	Track thickness
--slider-track-radius	--radius-full	Track border radius
--slider-track-bg	--surface-overlay	Unfilled track background
--slider-track-fill	--color-accent	Fill color
--slider-track-fill-hover	--color-accent-hover	Fill color on hover
--slider-track-border-width	0	Optional track border
--slider-track-border-color	--border-subtle	Track border color

Thumb — Circle (default)

Token	Default	Description
--slider-thumb-size-{sm|md|lg}	0.75rem / 1rem / 1.25rem	Thumb diameter
--slider-thumb-bg	--color-neutral-0	Thumb background
--slider-thumb-border-width	2px	Thumb border
--slider-thumb-border-color	--color-accent	Thumb border color
--slider-thumb-shadow	--shadow-sm	Rest shadow
--slider-thumb-shadow-active	--shadow-md	Active/dragging shadow
--slider-thumb-scale-hover	1.15	Hover scale factor
--slider-thumb-scale-active	1.25	Active scale factor
--slider-thumb-transition	--duration-fast	Transition speed

Thumb — Bar Variant

Token	Default	Description
--slider-bar-width-{sm|md|lg}	2px / 3px / 4px	Bar width
--slider-bar-height-{sm|md|lg}	0.875rem / 1.125rem / 1.375rem	Bar height
--slider-bar-radius	--radius-full	Bar end caps

Marks

Token	Default	Description
--slider-mark-size	4px	Mark dot diameter
--slider-mark-color	--surface-overlay	Inactive mark color
--slider-mark-color-active	--color-accent	Active mark color
--slider-mark-label-font-size	--text-xs	Label font size
--slider-mark-label-color	--text-muted	Label text color
--slider-mark-label-gap	--space-2	Gap between track and label

Tooltip

Token	Default	Description
--slider-tooltip-bg	--surface-elevated	Background
--slider-tooltip-color	--text-primary	Text color
--slider-tooltip-font-size	--text-xs	Font size
--slider-tooltip-font-weight	--font-semibold	Font weight
--slider-tooltip-px	--space-2	Horizontal padding
--slider-tooltip-py	--space-1	Vertical padding
--slider-tooltip-radius	--radius-md	Border radius
--slider-tooltip-shadow	--shadow-md	Shadow
--slider-tooltip-offset	--space-2	Distance from thumb

Generated Styles (sliders.g.css)

Container

• slider — relative flex container with touch-action: none, cursor: pointer
• Sizes: sm · md · lg (default: md) — controls track height + thumb size
• Orientation: horizontal (default) · vertical
• Disabled: reduced opacity, pointer-events: none
• Flags: range (dual-thumb), tooltip mode (none | hover | always)

Track

• slider-track — full-width rounded container
• slider-track-fill — left-anchored fill, width via --slider-fill custom property
• Range mode: fill positioned via --slider-fill-start and --slider-fill-end
• Color variants: accent · success · warning · danger

Thumb

• slider-thumb — absolute positioned, circle by default, grab cursor
• Shapes: circle (default) · bar · pill · none
• States: hover (scale up), active (scale + shadow), focus-visible (ring)
• Vertical: axis-swapped positioning

Marks

• slider-marks — absolute container, pointer-events: none
• slider-mark — small dot at step position, active state for marks below value
• slider-mark-label — positioned text below (or beside for vertical)

Tooltip

• slider-tooltip — positioned above thumb, hidden by default
• Modes: none (default) · hover (show on hover/drag) · always (permanently visible)

Native Input

• slider-input — sr-only (visually hidden, keyboard accessible)

TypeScript Types (types/)

SliderSizes; // ["sm", "md", "lg"]
SliderThumbShapes; // ["circle", "bar", "pill", "none"]
SliderTrackColors; // ["accent", "success", "warning", "danger"]
SliderTooltipModes; // ["none", "hover", "always"]
SliderOrientations; // ["horizontal", "vertical"]

interface SliderStyleProps {
  size?: SliderSize;
  orientation?: SliderOrientation;
  disabled?: boolean;
  tooltip?: SliderTooltipMode;
  range?: boolean;
}
interface SliderTrackStyleProps {}
interface SliderTrackFillStyleProps {
  color?: SliderTrackColor;
}
interface SliderThumbStyleProps {
  shape?: SliderThumbShape;
  active?: boolean;
}
interface SliderMarkStyleProps {
  active?: boolean;
}
interface SliderMarkLabelStyleProps {}
interface SliderTooltipStyleProps {
  visible?: boolean;
}

Dist Structure

File	Description
index.css	Barrel — imports all files below
sliders.css	Token definitions
sliders.g.css	Generated slider styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires @vibe-labs/design (colors, surfaces, spacing, typography, transitions, elevation) and @vibe-labs/design-forms (disabled opacity).

Build

npm run build