SliderBar

import { SliderBar, SliderBarSize } from '@wearables-ui-toolkit/mrbd';

<SliderBar
  value={bytesDownloaded}
  maximumValue={bytesTotal}
  size={SliderBarSize.THIN}
  animated
  aria-label="Download progress"
/>;

import { useState } from 'react';
import { SliderBar, SliderBarState } from '@wearables-ui-toolkit/mrbd';

export function BrightnessBar() {
  const [level, setLevel] = useState(0.5);
  const [isFocused, setIsFocused] = useState(false);

  return (
    <SliderBar
      value={level}
      onChange={setLevel}
      incrementPercentage={0.05}
      state={isFocused ? SliderBarState.FOCUSED : SliderBarState.IDLE}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
      animated
      aria-label="Brightness"
    />
  );
}

.brightness-row {
  display: flex;
  align-items: center;
  gap: var(--uit-spacing-medium);
  padding-inline: var(--uit-spacing-large);
}

.brightness-row .bar {
  flex: 1 1 auto;
}

import { SliderBar, SliderBarOrientation } from '@wearables-ui-toolkit/mrbd';

<div className="level-column">
  <SliderBar
    value={level}
    orientation={SliderBarOrientation.VERTICAL}
    aria-label="Level"
  />
</div>;

• IDLE — resting thickness and the idle fill colour (--uit-color-control-idle).
• FOCUSED — the active fill colour (--uit-color-control-active), and expanded thickness with the default size.

• DEFAULT — expands on the cross axis in the focused state.
• THIN — constant compact thickness in both states.

• HORIZONTAL — the bar spans the full width of its parent, the fill grows from the left edge, and thickness is the height.
• VERTICAL — the bar stretches to the parent’s height, the fill grows from the bottom, and thickness is the width.

• Clamping.value is clamped into the range before it is drawn and before it is announced, so an out-of-range value never overflows the track.
• Degenerate range. When minimumValue and maximumValue are equal the bar renders completely filled rather than dividing by zero.
• Display-only by default. With no onChange, the bar reports role="progressbar", has no tab stop, and ignores all keys.
• Interactive mode. With onChange and not disabled, the bar reports role="slider", becomes a tab stop, and consumes ArrowLeft and ArrowRight. Right increments, Left decrements, each by incrementPercentage of the range, clamped to the bounds. Held keys repeat, which accelerates naturally. Up and Down are deliberately left alone so vertical focus navigation still works.
• Orientation does not change the keys. Stepping is always ArrowRight to increment and ArrowLeft to decrement, including when orientation is VERTICAL. Only the drawing axis changes.
• Still controlled. Even in interactive mode the component never mutates value. It calls onChange with the next value and re-renders from the prop.
• No pointer adjustment. The bar is keyboard-operated only; clicking or dragging the track does not change the value, in either orientation.
• Disabled.disabled turns interactive mode off entirely: the role falls back to progressbar, the tab stop is removed, keys are ignored, and aria-disabled is set. There is no dimmed visual treatment.
• Colours. The track uses --uit-color-background-track. The fill uses --uit-color-control-idle in the idle state and --uit-color-control-active in the focused state.
• Motion.animated transitions the fill along the value axis, and the colour and thickness across state changes. The thickness transition is limited to IDLE and FOCUSED changes: the mount render snaps, and a change to size, orientation, or shouldExpandOnFocus snaps rather than tweening so a layout change never looks like a value change.
• Reduced motion. The component does not read a motion preference for you. Call usePrefersReducedMotion and leave animated off when the user has asked for less motion; every change then snaps.

• Interactive: role="slider" with aria-valuemin, aria-valuemax, aria-valuenow (the clamped raw value) and aria-valuetext (the value as a rounded percentage of the range).
• Display-only: role="progressbar" with the same range attributes.
• The component never emits aria-orientation, and unlike the role and value attributes it does not overwrite one you pass. Supply aria-orientation="vertical" on a vertical bar so the axis is announced.
• aria-label defaults to the percentage, which is not a name. Always pass a descriptive aria-label unless a parent component supplies the accessible name.
• Because focus is not derived internally, an interactive bar that never gets state={SliderBarState.FOCUSED} gives no visible focus feedback. Drive state from onFocus and onBlur, as in the example above.
• When the bar sits inside a component that already exposes slider semantics, do not add a second labelled slider node — use that component’s own value API.

• Pass a meaningful aria-label and keep value in application state.
• Use THIN for dense or secondary contexts and the default size where the bar is the focus target.
• Give a vertical bar a parent with a real height, and a horizontal bar a parent that constrains its width.
• Prefer ListItem with showSlider or IsolatedControl for a production adjustment interface, so label, focus, value, and stepping come as one pattern.

• Avoid adding your own onKeyDown; interactive mode already consumes Left and Right, and your handler would take the place of that stepping.
• Avoid expecting Up and Down to adjust a vertical interactive bar — stepping is Left and Right in both orientations.
• Avoid expecting a click or drag on the track to seek; wire keyboard stepping or use Scrubber when pointer seeking matters.
• Use the component-owned track and fill. Generated class names are not supported customization surfaces.
• Avoid using a SliderBar where media time semantics matter — use Scrubber.
• Avoid using VolumeIndicator or ZoomIndicator as an input; those are transient readouts.