react-circular-slider

A highly customizable circular slider with zero dependencies. Check out the live demos!

TypeScript Support

This component includes TypeScript types for the component props, ref handle, knob positions, and gradient stops.

JavaScript users: no worries - the published output is plain JavaScript and works exactly as before.

Installation

npm install @fseehawer/react-circular-slider

Example

import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';

const App = () => (
    <CircularSlider onChange={(value) => console.log(value)} />
);

export default App;

Configuration Examples

See the live demos for copy-ready examples covering labels, colors, custom data, knob content, multi-stop gradients, and arc gauges.

Configuration Notes

• Use data for custom labels or non-linear steps; use min and max for inclusive numeric ranges.
• Use dataIndex to choose the selected item in data, and value only when controlling the slider by degrees.
• Use ariaLabel when the visible label is abbreviated, hidden, or not descriptive enough for assistive technology.
• Use arcStart and arcEnd for gauge-style sliders. Add trackDraggable when users should be able to click or drag the track.
• In arc mode, gradient stops run from arcStart to arcEnd, which keeps gauge colors in value order.

Props

The table below lists all available props along with their TypeScript types, default values, and descriptions.

License

MIT License