Module index

replace-compound-slider — A modernized, React 18/19-compatible fork of react-compound-slider.

This library provides a set of headless, compound slider components with no opinion about markup or styles. You build your own handle, track, rail and tick sub-components and pass them as children. The Slider parent streams position and percentage data down so you can render whatever you like.

Quick Start

import { Slider, Rail, Handles, Tracks, Ticks } from 'replace-compound-slider';

<Slider domain={[0, 100]} values={[20, 60]} step={1}>
  <Rail>{ ({ getRailProps }) => <div className="rail" {...getRailProps()} /> }</Rail>
  <Handles>
    { ({ handles, getHandleProps }) =>
      handles.map(h => <MyHandle key={h.id} handle={h} getHandleProps={getHandleProps} />)
    }
  </Handles>
</Slider>
Copy