- Components
- range
Range
Slider component for selecting numeric values within a span.
Demo
<div class="flex flex-col space-y-5 w-full">
<x-ui.range name="range_slide" min="0" max="100" class="text-primary" />
<x-ui.range name="range_slide" min="0" max="80" value="20" class="text-secondary" />
</div>
Installation
Shell
flexi-cli add rangeStepper
<x-ui.range name="range_slide_stepper" min="0" max="40" step="4"
class="[--ui-input-range-thumb-bg:var(--c-bg)] text-primary" />
Styles
<div class="flex flex-col space-y-5 w-full">
<x-ui.range name="range_slide" min="0" max="100" class="text-primary" />
<x-ui.range name="range_slide" thumb-bg-current min="0" max="80" value="20" class="text-secondary" />
<x-ui.range name="range_slide" min="0" max="80" value="20" class="text-secondary" />
<x-ui.range name="range_slide" min="0" max="80" value="20" class="text-accent" />
<x-ui.range name="range_slide" min="0" max="80" value="20" class="text-danger" />
</div>
Custom indicator
<div class="flex flex-col space-y-5 w-full">
<x-ui.range name="range_slide" min="0" max="100" class="text-primary" custom-indicator="bg-primary"/>
<x-ui.range name="range_slide" min="0" max="80" value="20" class="text-secondary" custom-indicator="bg-secondary"/>
</div>
Sizes
<div class="flex flex-col space-y-5 w-full">
<x-ui.range size="xs" name="range_slide_xs" min="0" max="70" value="20" class="text-primary" />
<x-ui.range size="xs" name="range_slide_xs_indicator" value="40" min="0" max="120"
class="text-fg-title" custom-indicator="bg-fg-title" />
<x-ui.range size="sm" name="range_slide_sm" min="0" max="80" value="9"
class="text-primary" />
<x-ui.range size="sm" name="range_slide_sm_with_indicator" min="0" max="40" value="20"
class="text-fg-title" custom-indicator="bg-fg-title" />
<x-ui.range name="range_slide" min="0" max="70" value="20" class="text-primary" />
<x-ui.range name="range_slide_with_indicator" min="0" max="140" value="20" class="text-fg-title"
custom-indicator="bg-fg-title" />
</div>