react-circular-input

React components for easily composing a circular range input

npm i react-circular-input

Example

import {
	CircularInput,
	CircularTrack,
	CircularProgress,
	CircularThumb,
} from 'react-circular-input'

export default () => {
	const [value, setValue] = useState(0.25)

	return (
		<CircularInput value={value} onChange={setValue}>
			<CircularTrack />
			<CircularProgress />
			<CircularThumb />
		</CircularInput>
	)
}

There's a lot more you can do with the library. From a simple gauge to a fully custom and animated circular input range.

Play around with the examples at CodeSandbox

Edit react-circular-input

A declarative and composable approach means we have a lot of flexibility, check out the other pages for how to go further!