Range Band
A line inside its envelope: min–max, a confidence interval, or Bollinger bands (a moving average ± kσ).
$149 once · every Pro piece
The band fills solid, as a gradient or with a hatch, and fades out at both ends instead of stopping. Scrub it and a range capsule rises at the cursor: a soft rounded column from low to high with a dot on each edge and the line's own dot between them, so the spread reads as a physical span; the tooltip says "low – high". Readings that break out of the band are the only heat on the chart. The legend isolates or hides the line or the band, and the axis tweens to fit.
Install
npx shadcn@latest add @obsyde/range-bandNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RangeBand } from '@/components/obsyde/ember/range-band/RangeBand';
export function Example() {
return (
<RangeBand
fill="gradient"
capsule
breaches
legend="row"
tooltip="panel"
/>
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/range-band/RangeBand.tsxcomponentember/range-band/range-band.cssstylesember/range-band/RangeBandDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/series.tsxsharedember/viz-kit/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
modeBand | 'minmax' | 'confidence' | 'bollinger' | 'minmax' |
fillFill | 'gradient' | 'solid' | 'pattern' | 'gradient' |
edgesDashed edges | boolean | false |
breachesBreakouts | boolean | true |
capsuleRange capsule | boolean | true |
legendLegend | 'row' | 'list' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'corner' | 'none' | 'panel' |
crosshairCrosshair | 'solid' | 'dashed' | 'gradient' | 'none' | 'solid' |
dotsDots | 'halo' | 'ring' | 'none' | 'halo' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
curveCurve | 'monotone' | 'linear' | 'catmull' | 'step' | 'monotone' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 260 |
pointsPoints | number | 40 |
seedSeed | number | 2 |