@vibe-labs/design-components-sliders

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

Installation

css

@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";

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`	`2px`	Track thickness (sm)
`--slider-track-height-md`	`4px`	Track thickness (md)
`--slider-track-height-lg`	`6px`	Track thickness (lg)
`--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`	`0.75rem`	Thumb diameter (sm)
`--slider-thumb-size-md`	`1rem`	Thumb diameter (md)
`--slider-thumb-size-lg`	`1.25rem`	Thumb diameter (lg)
`--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`	`2px`	Bar width (sm)
`--slider-bar-width-md`	`3px`	Bar width (md)
`--slider-bar-width-lg`	`4px`	Bar width (lg)
`--slider-bar-height-sm`	`0.875rem`	Bar height (sm)
`--slider-bar-height-md`	`1.125rem`	Bar height (md)
`--slider-bar-height-lg`	`1.375rem`	Bar height (lg)
`--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

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)

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

bash

npm run build

Usage Guide

Import

css

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

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

Variants

Attribute / Flag	Values	Notes
`data-size`	`sm` `md` `lg`	Default: `md`
`data-orientation`	`horizontal` `vertical`	Default: `horizontal`
`data-disabled`	boolean flag	Pointer-events: none
`data-range`	boolean flag	Dual-thumb range slider
`data-tooltip`	`none` `hover` `always`	Tooltip visibility mode
`data-color` (fill)	`accent` `success` `warning` `danger`	On `slider-track-fill`
`data-shape` (thumb)	`circle` `bar` `pill` `none`	On `slider-thumb`

Fill width is driven by --slider-fill (single) or --slider-fill-start + --slider-fill-end (range).

Examples

Basic slider

html

<div class="slider" style="--slider-fill: 40%">
  <div class="slider-track">
    <div class="slider-track-fill"></div>
  </div>
  <div class="slider-thumb"></div>
  <input type="range" class="slider-input" min="0" max="100" value="40" />
</div>

Sized slider

html

<div class="slider" data-size="lg" style="--slider-fill: 70%">
  <div class="slider-track">
    <div class="slider-track-fill"></div>
  </div>
  <div class="slider-thumb"></div>
  <input type="range" class="slider-input" min="0" max="100" value="70" />
</div>

Color variant fill

html

<div class="slider" data-size="md" style="--slider-fill: 80%">
  <div class="slider-track">
    <div class="slider-track-fill" data-color="success"></div>
  </div>
  <div class="slider-thumb"></div>
  <input type="range" class="slider-input" min="0" max="100" value="80" />
</div>

Bar thumb shape

html

<div class="slider" style="--slider-fill: 50%">
  <div class="slider-track">
    <div class="slider-track-fill"></div>
  </div>
  <div class="slider-thumb" data-shape="bar"></div>
  <input type="range" class="slider-input" min="0" max="100" value="50" />
</div>

html

<div class="slider" data-tooltip="always" style="--slider-fill: 55%">
  <div class="slider-track">
    <div class="slider-track-fill"></div>
  </div>
  <div class="slider-thumb">
    <div class="slider-tooltip">55</div>
  </div>
  <input type="range" class="slider-input" min="0" max="100" value="55" />
</div>

Slider with marks

html

<div class="slider" style="--slider-fill: 50%">
  <div class="slider-track">
    <div class="slider-track-fill"></div>
  </div>
  <div class="slider-marks">
    <div class="slider-mark" style="left: 0%"><span class="slider-mark-label">0</span></div>
    <div class="slider-mark" data-active style="left: 25%"><span class="slider-mark-label">25</span></div>
    <div class="slider-mark" data-active style="left: 50%"><span class="slider-mark-label">50</span></div>
    <div class="slider-mark" style="left: 75%"><span class="slider-mark-label">75</span></div>
    <div class="slider-mark" style="left: 100%"><span class="slider-mark-label">100</span></div>
  </div>
  <div class="slider-thumb"></div>
  <input type="range" class="slider-input" min="0" max="100" value="50" step="25" />
</div>

With Vue

vue

<template>
  <div
    class="slider"
    :data-size="size"
    :data-disabled="disabled || undefined"
    :style="{ '--slider-fill': fillPercent + '%' }"
  >
    <div class="slider-track">
      <div class="slider-track-fill" :data-color="color"></div>
    </div>
    <div class="slider-thumb" :data-shape="thumbShape"></div>
    <input
      type="range"
      class="slider-input"
      :min="min"
      :max="max"
      :value="modelValue"
      @input="onInput"
    />
  </div>
</template>

Design Tokens

CSS Components

Vue Components

Themes

@vibe-labs/design-components-sliders

Installation

Contents

Tokens (`sliders.css`)

Track

Thumb — Circle (default)

Thumb — Bar Variant

Marks

Tooltip

Generated Styles (`sliders.g.css`)

Container

Track

Thumb

Marks

Tooltip

Native Input

TypeScript Types (`types/`)

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Examples

Basic slider

Sized slider

Color variant fill

Bar thumb shape

Slider with always-visible tooltip

Slider with marks

With Vue

@vibe-labs/design-components-sliders ​

Installation ​

Contents ​

Tokens (sliders.css) ​

Track ​

Thumb — Circle (default) ​

Thumb — Bar Variant ​

Marks ​

Tooltip ​

Generated Styles (sliders.g.css) ​

Container ​

Track ​

Thumb ​

Marks ​

Tooltip ​

Native Input ​

TypeScript Types (types/) ​

Dist Structure ​

Dependencies ​

Build ​

Usage Guide ​

Import ​

Variants ​

Examples ​

Basic slider ​

Sized slider ​

Color variant fill ​

Bar thumb shape ​

Slider with always-visible tooltip ​

Slider with marks ​

With Vue ​

@vibe-labs/design-components-sliders

Installation

Contents

Tokens (`sliders.css`)

Track

Thumb — Circle (default)

Thumb — Bar Variant

Marks

Tooltip

Generated Styles (`sliders.g.css`)

Container

Track

Thumb

Marks

Tooltip

Native Input

TypeScript Types (`types/`)

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Examples

Basic slider

Sized slider

Color variant fill

Bar thumb shape

Slider with always-visible tooltip

Slider with marks

With Vue