<.range max={100} min={0} value={40}/>

<.range color="primary" max={100} min={0} value={30}/>
<.range color="secondary" max={100} min={0} value={40}/>
<.range color="accent" max={100} min={0} value={50}/>
<.range color="info" max={100} min={0} value={60}/>
<.range color="success" max={100} min={0} value={70}/>
<.range color="warning" max={100} min={0} value={80}/>
<.range color="error" max={100} min={0} value={90}/>

<.range max={100} min={0} size="xs" value={40}/>
<.range max={100} min={0} size="sm" value={50}/>
<.range max={100} min={0} size="md" value={60}/>
<.range max={100} min={0} size="lg" value={70}/>