Component primitive

Brand Range

<brand-range> wraps Web Awesome's <wa-slider>. Great for volume, quality, and opacity sliders where a text field would be awkward.

<brand-range>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-range>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic

Tooltip placement

States

Usage

import { BrandRange } from '@brandos/ui';

<brand-range label="Volume" min="0" max="100" value="50"></brand-range>

// JS
const el = document.querySelector('brand-range');
el.addEventListener('change', () => console.log(el.value));