Slider theming

Every cosmetic value Slider renders is a --rozie-slider-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

.rozie-slider {
  --rozie-slider-font: inherit;
  --rozie-slider-accent: #0066cc;
  --rozie-slider-track-height: 0.375rem;
  --rozie-slider-fill-bg: var(--rozie-slider-accent);
}

Tokens

layout / typography

Token	Default
--rozie-slider-font	inherit
--rozie-slider-pad	0.5rem 0

accent — the single color most consumers will set; thumb + fill derive from it

Token	Default
--rozie-slider-accent	#0066cc

track (the thin bar behind the thumbs)

Token	Default
--rozie-slider-track-height	0.375rem
--rozie-slider-track-radius	999px
--rozie-slider-track-bg	rgba(0, 0, 0, 0.18)

fill (the colored <div> underlay; spans the runtime fill-start→fill-end vars)

Token	Default
--rozie-slider-fill-bg	var(--rozie-slider-accent)

thumb (the native input pseudo-element; styled per-vendor in the source)

Token	Default
--rozie-slider-thumb-size	1rem
--rozie-slider-thumb-bg	var(--rozie-slider-accent)
--rozie-slider-thumb-border	2px solid #fff
--rozie-slider-thumb-shadow	0 1px 3px rgba(0, 0, 0, 0.3)

WebKit-only: vertical centering of the thumb over the track. Default keeps the thumb centered on the default track height; override if you change the thumb-size / track-height pair.

Token	Default
--rozie-slider-thumb-offset	calc((0.375rem - 1rem) / 2)

disabled

Token	Default
--rozie-slider-disabled-opacity	0.55

vertical (rotate-90 wrapper) box sizing

Token	Default
--rozie-slider-thickness	2.5rem
--rozie-slider-length	12rem

marks overlay

Token	Default
--rozie-slider-mark-color	rgba(0, 0, 0, 0.55)
--rozie-slider-mark-offset	0.75rem
--rozie-slider-mark-font-size	0.6875rem

value bubble overlay (gated by showValue)

Token	Default
--rozie-slider-bubble-offset	-1.25rem
--rozie-slider-bubble-padding	0.0625rem 0.375rem
--rozie-slider-bubble-font-size	0.6875rem
--rozie-slider-bubble-fg	#fff
--rozie-slider-bubble-bg	var(--rozie-slider-accent)
--rozie-slider-bubble-radius	4px

runtime fill — computed per-render from value/min/max and written as inline custom properties on the root (the fillStyle $computed). The inline style always wins over anything declared here. Declared initial on purpose: the two read sites disagree on their own local fallback (the fill underlay supplies a 0% fallback, the bubble read supplies none), so freezing either value would collapse the other. initial resets the custom property to the guaranteed-invalid value, which makes each var() substitute its OWN local fallback when the inline value is absent — render-neutral, since the inline style takes priority regardless.

Token	Default
--rozie-slider-fill-start	initial
--rozie-slider-fill-end	initial

Design-system bridges

Each package ships token presets that map Slider's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/slider-react/themes/base.css';
import '@rozie-ui/slider-react/themes/bootstrap.css';
import '@rozie-ui/slider-react/themes/material.css';
import '@rozie-ui/slider-react/themes/shadcn.css';

See also

• Slider — showcase & API — the full prop / event / slot / handle reference.
• Slider — usage examples — idiomatic per-framework consumption code.
• Slider comparison — how it stacks up against the per-framework libraries.
• Slider — live demo — the real package running in the page.