Histogram Range

A distribution with a two-thumb range slider fused to its baseline.

$149 once · every Pro piece

Customize

Bins

Samples

Snap to bins

From

Fill

Outside

outline

ghost

hatch

Density line

Reference

none

mean

median

panel

none

Status

ready

empty

Height

Unit

Label

Seed

Bars inside the range are bone and bars outside fall back to a faint outline; a bar a thumb cuts through is cut exactly, with a hot 1px edge, and the count in range rolls as you drag. Thumbs take a pointer, a finger or the keys, and can snap to bins. Options on the viz-kit: gradient or textured in-range fills, ghost or hatched bars outside, a density line, bone inside the range, a dashed mean or median with a value pill, a quiet panel for the bin under the pointer, and loading and empty states.

Install

npx shadcn@latest add @obsyde/histogram-range

Needs your licence key · Get Pro

Usage

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

import { HistogramRange } from '@/components/obsyde/ember/histogram-range/HistogramRange';

export function Example() {
  return (
    <HistogramRange label="Distribution" />
  );
}

Files

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

ember/histogram-range/HistogramRange.tsxcomponent
ember/histogram-range/histogram-range.cssstyles
ember/histogram-range/HistogramRangeDemo.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/shape.tsshared
ember/shared/RollingNumber.tsxshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`bins`Bins	`number`	`36`
`samples`Samples	`number`	`1400`
`snap`Snap to bins	`boolean`	`false`
`from`From	`number`	`28`
`to`To	`number`	`72`
`fill`Fill	`'solid' \| 'gradient' \| 'diagonal-up' \| 'dots' \| 'vertical' \| 'crosshatch'`	`'solid'`
`outside`Outside	`'outline' \| 'ghost' \| 'hatch'`	`'outline'`
`density`Density line	`boolean`	`false`
`reference`Reference	`'none' \| 'mean' \| 'median'`	`'none'`
`tooltip`Tooltip	`'panel' \| 'none'`	`'panel'`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`height`Height	`number`	`140`
`unit`Unit	`string`	`—`
`label`Label	`string`	`'Distribution'`
`seed`Seed	`number`	`4`