Range Bars

Floating bars, one per row, from a start to an end, with a capsule tick for the current value.

$149 once · every Pro piece

Customize

Variant

range

budget

Rows

Ticks

Outliers

Legend

row

none

pill

panel

none

Pattern

Background

grid

none

Status

ready

empty

Value labels

Seed

As a range it reads low to high and where things sit now; a tick that falls outside its range turns hot and a dashed leader ties it back. As a budget it reads in, spent and left: the spent part solid, what is left hatched, a tick at today's pace and anything past the budget in the accent. Point at a row or step with the arrow keys: the others step back, the ends print their values and a pill rides the tick. Ticks glide on springs when the data changes.

Install

npx shadcn@latest add @obsyde/range-bars

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { RangeBars } from '@/components/obsyde/ember/range-bars/RangeBars';

export function Example() {
  return (
    <RangeBars variant="range" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/range-bars/RangeBars.tsxcomponent
ember/range-bars/range-bars.cssstyles
ember/range-bars/RangeBarsDemo.tsxdemo
ember/viz-kit/viz-kit.cssshared
ember/viz-kit/Tooltip.tsxshared
ember/viz-kit/focus.tsshared
ember/viz-kit/patterns.tsxshared
ember/viz-kit/roll.tsshared
ember/shared/rolling-number.cssshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/viz-kit/scale.tsshared
ember/viz-kit/motion.tsshared
ember/viz-kit/chart.tsxshared
ember/shared/ember.cssshared
ember/viz-kit/touch.tsshared
ember/viz-kit/keyboard.tsshared
ember/viz-kit/size.tsshared
ember/viz-kit/States.tsxshared
ember/viz-kit/shape.tsshared
ember/viz-kit/marks.tsxshared
ember/viz-kit/Legend.tsxshared
ember/viz-kit/demo.tsxshared
ember/viz-kit/demo.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`variant`Variant	`'range' \| 'budget'`	`'range'`
`rows`Rows	`number`	`7`
`ticks`Ticks	`boolean`	`true`
`outliers`Outliers	`boolean`	`false`
`legend`Legend	`'row' \| 'none'`	`'row'`
`tooltip`Tooltip	`'pill' \| 'panel' \| 'none'`	`'pill'`
`pattern`Pattern	`'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch'`	`'none'`
`background`Background	`'grid' \| 'none'`	`'grid'`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`valueLabels`Value labels	`boolean`	`false`
`seed`Seed	`number`	`4`