Range Slider

Two thumbs on a rail that behave like physical objects: they push each other along instead of crossing, the span between them drags both, and they settle onto the step when released.

$149 once · every Pro piece

Customize

Min

Max

Step

Low

High

Minimum gap

Unit

Disabled

The readout rolls its digits.

Install

npx shadcn@latest add @obsyde/range-slider

Needs your licence key · Get Pro

Usage

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

import { RangeSlider } from '@/components/obsyde/ember/range-slider/RangeSlider';

export function Example() {
  return (
    <RangeSlider />
  );
}

Files

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

ember/range-slider/RangeSlider.tsxcomponent
ember/range-slider/range-slider.cssstyles
ember/range-slider/RangeSliderDemo.tsxdemo
ember/shared/rolling-number.cssshared
ember/shared/RollingNumber.tsxshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/nav-kit/motion.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`min`Min	`number`	`0`
`max`Max	`number`	`100`
`step`Step	`number`	`1`
`low`Low	`number`	`20`
`high`High	`number`	`80`
`minGap`Minimum gap	`number`	`0`
`unit`Unit	`string`	`—`
`disabled`Disabled	`boolean`	`false`