Range
Slider control for selecting values within a specified range
Class Reference Basic
Input(type='range', min='0', max='100', value='40', cls='range')
Auto-import documentation coming soon...
|||||
12345
Input(type='range', min='0', max='100', value='25', step='25', cls='range'),
Div(
Span('|'),
Span('|'),
Span('|'),
Span('|'),
Span('|'),
cls='flex w-full justify-between px-2 text-xs'
)
<div class="w-full max-w-xs">
<input type="range" min="0" max="100" value="25" class="range" step="25" />
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
Auto-import documentation coming soon...
Variants
Iput(type='range', min='0', max='100', value='40', cls='range range-primary'),
Input(type='range', min='0', max='100', value='40', cls='range range-secondary'),
Input(type='range', min='0', max='100', value='40', cls='range range-accent'),
Input(type='range', min='0', max='100', value='40', cls='range range-neutral'),
Input(type='range', min='0', max='100', value='40', cls='range range-info'),
Input(type='range', min='0', max='100', value='40', cls='range range-success'),
Input(type='range', min='0', max='100', value='40', cls='range range-warning'),
Input(type='range', min='0', max='100', value='40', cls='range range-error')
Auto-import documentation coming soon...
Input(type='range', min='0', max='100', value='40', cls='range range-xs'),
Input(type='range', min='0', max='100', value='50', cls='range range-sm'),
Input(type='range', min='0', max='100', value='60', cls='range range-md'),
Input(type='range', min='0', max='100', value='70', cls='range range-lg'),
Input(type='range', min='0', max='100', value='80', cls='range range-xl'),
Auto-import documentation coming soon...
Class Reference
Class | Type | Description |
---|---|---|
range | Component | Base range class |
range-primary | Color | Primary color variant |
range-secondary | Color | Secondary color variant |
range-accent | Color | Accent color variant |
range-neutral | Color | Neutral color variant |
range-info | Color | Info color variant |
range-success | Color | Success color variant |
range-warning | Color | Warning color variant |
range-error | Color | Error color variant |
range-xs | Size | Extra small size |
range-sm | Size | Small size |
range-md | Size | Medium size (default) |
range-lg | Size | Large size |
range-xl | Size | Extra large size |
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
LLMs Context: Full Markdown | This Component