React components for easily composing a circular range input
React components for easily composing a circular range input
npm i react-circular-input
import { CircularInput, CircularTrack, CircularProgress, CircularThumb } from 'react-circular-input'export default () => { const [value, setValue] = useState(0.25)
return ( <circularinput value="{value}" onchange="{setValue}"> <circulartrack></circulartrack> <circularprogress></circularprogress> <circularthumb></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 examples at CodeSandbox:
A declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further!
Full documentation at react-circular-input.now.sh.
Enjoy! 🎉