BriteSlider

Sharedcomponent✓ stamped

Range slider, margin slider, and segmented control selectors.

@brite-nites/design-system/primitives/brite-slider

Sliders + segmented controls. 28px line height matches buttons, inputs, property fields.

Segmented control — single select

Pill container with one-of-many selection. Selected option gets the primary-button fill.

Segmented control — multi-select (merging pills)

Multiple options can be selected. Adjacent selections visually merge into one continuous shape via a gooey SVG filter. Deselecting an item between two others causes the shape to split cleanly. Try toggling different combinations.

selected: [a, b, d]

Disabled

Whole control disabled, or individual options via option.disabled.

Slider

Default horizontal slider with dotted tick track and vertical thumb. Click track to jump, drag to adjust, keyboard arrows ← → ↑ ↓ / Home / End.

Percent (0–100)

Stepped (10-unit step, no value display)

Disabled

Margin slider (redline variant)

Target margin indicator above the track + unit cost label. Fill turns orange when current value is below target (danger zone); returns to neutral at or above target.

$7.00 Per Unit

40%55%75%

Drag below 55% to see the orange redline. Current: 45%

$4.20 Per Unit (at 60%)

40%55%75%