tanstack-ranger

Install @tanstack/react-ranger and call useRanger with getRangerElement, values, min, max, and onChange. Render a track div with position relative, map rangerInstance.handles to button elements, and spread handle.getHandleProps() for drag and keyboard support.

Pass an array with more than two values to the values option, such as [10, 40, 60, 90]. Use rangerInstance.getSteps() to render track segments between thumbs and always read instance.sortedValues in onChange since handles can cross during dragging.

Yes, TanStack Ranger has stable adapters for Vue, Solid, Svelte, and Angular, all built on the framework-agnostic @tanstack/ranger-core package. The core API for values, steps, and handles remains consistent across adapters.

Yes, pass the logarithmicInterpolator exported from @tanstack/react-ranger as the interpolator option. This maps slider positions to a logarithmic value distribution, useful for ranges like 1 to 1000 where linear steps feel uneven.

Handles can cross each other during drag operations, so the raw values array may be unordered. Always use instance.sortedValues inside the onChange callback to get values in ascending order before updating your state.

Yes, getHandleProps() returns role="slider", aria-valuemin, aria-valuemax, aria-valuenow, and keyboard handlers for arrows, Home, End, and Page keys. Add an aria-label to each handle to describe its purpose for screen reader users.