Slider theming

The values listed below are exposed as --rozie-slider-* custom properties, each with a built-in fallback, so Slider works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-slider-font: inherit;
  --rozie-slider-accent: #0066cc;
  --rozie-slider-track-height: 0.375rem;
  --rozie-slider-thumb-size: 1rem;
}

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)

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

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

Token	Default
--rozie-slider-thumb-size	1rem
--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-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

Defaulted where Slider reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-slider-bubble-bg	var(--rozie-slider-accent, #0066cc)
--rozie-slider-fill-bg	var(--rozie-slider-accent, #0066cc)
--rozie-slider-thumb-bg	var(--rozie-slider-accent, #0066cc)

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 Vue leaf's workspace build running in the page (not yet the published npm package).