Summary
Add a ct-slider component for selecting numeric values within a range. Sliders are essential form controls for price filters, volume controls, date ranges, rating inputs, and any continuous value selection. The native <input type="range"> has inconsistent cross-browser styling and needs a design-system treatment to match the rest of the form controls.
Requirements
Core structure
- Wraps native
<input type="range"> for full form integration and accessibility
- Custom-styled track and thumb via appearance reset + pseudo-elements
- Consistent styling across Chrome (
::-webkit-slider-*) and Firefox (::-moz-range-*)
Variants
- Single value (default) — one thumb
- Range (
ct-slider--range) — two thumbs for min/max selection (requires two <input> elements overlaid)
- With ticks (
ct-slider--ticks) — visual tick marks at defined intervals via ct-slider__tick
Sizes
ct-slider--sm — thinner track (2px), smaller thumb- default (md) — standard track (4px)
ct-slider--lg — thicker track (6px), larger thumb
Value display
ct-slider__value — optional live value readout positioned above the thumb or beside the sliderct-slider__min / ct-slider__max — optional labels at track endpoints
States
:hover — thumb scale-up:focus-visible — focus ring on thumb (consistent with --ct-control-border-focus):active — thumb pressed state:disabled / [aria-disabled="true"] — reduced opacity, no interaction[aria-invalid="true"] — error styling matching other form controls- Filled track portion highlighted with brand color
Accessibility
- Uses native
<input type="range"> — inherits role="slider" automatically
aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext for custom formattingaria-label or associated <label> required- Keyboard: Arrow keys for step increment, Page Up/Down for larger jumps, Home/End for min/max
- Range variant: each thumb independently focusable and labeled
Naming
.ct-slider
.ct-slider--sm / --lg
.ct-slider--range
.ct-slider--ticks
.ct-slider__track
.ct-slider__thumb (via pseudo-elements)
.ct-slider__value
.ct-slider__min / __max
.ct-slider__tick
Design Tokens
--ct-slider-track-height: 4px--ct-slider-track-bg: var(--color-bg-muted)--ct-slider-track-fill: var(--color-brand-primary)--ct-slider-thumb-size: 20px--ct-slider-thumb-bg: var(--color-bg-elevated)--ct-slider-thumb-border: var(--color-brand-primary)--ct-slider-thumb-shadow: var(--shadow-sm)
Files
components/components.css — component styles (track, thumb, filled portion for both WebKit and Gecko)stories/Slider.stories.js — stories for single, range, ticks, sizes, disabled, error states
Summary
Add a
ct-slidercomponent for selecting numeric values within a range. Sliders are essential form controls for price filters, volume controls, date ranges, rating inputs, and any continuous value selection. The native<input type="range">has inconsistent cross-browser styling and needs a design-system treatment to match the rest of the form controls.Requirements
Core structure
<input type="range">for full form integration and accessibility::-webkit-slider-*) and Firefox (::-moz-range-*)Variants
ct-slider--range) — two thumbs for min/max selection (requires two<input>elements overlaid)ct-slider--ticks) — visual tick marks at defined intervals viact-slider__tickSizes
ct-slider--sm— thinner track (2px), smaller thumbct-slider--lg— thicker track (6px), larger thumbValue display
ct-slider__value— optional live value readout positioned above the thumb or beside the sliderct-slider__min/ct-slider__max— optional labels at track endpointsStates
:hover— thumb scale-up:focus-visible— focus ring on thumb (consistent with--ct-control-border-focus):active— thumb pressed state:disabled/[aria-disabled="true"]— reduced opacity, no interaction[aria-invalid="true"]— error styling matching other form controlsAccessibility
<input type="range">— inheritsrole="slider"automaticallyaria-valuemin,aria-valuemax,aria-valuenow,aria-valuetextfor custom formattingaria-labelor associated<label>requiredNaming
Design Tokens
--ct-slider-track-height: 4px--ct-slider-track-bg: var(--color-bg-muted)--ct-slider-track-fill: var(--color-brand-primary)--ct-slider-thumb-size: 20px--ct-slider-thumb-bg: var(--color-bg-elevated)--ct-slider-thumb-border: var(--color-brand-primary)--ct-slider-thumb-shadow: var(--shadow-sm)Files
components/components.css— component styles (track, thumb, filled portion for both WebKit and Gecko)stories/Slider.stories.js— stories for single, range, ticks, sizes, disabled, error states