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

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