- 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
php artisan flexi:add rangeAPI
| Prop | Description |
|---|---|
size
(xs|sm|md)
|
Controls track and thumb sizing.
|
min
(number|string)
|
Lower bound for slider value.
|
max
(number|string)
|
Upper bound for slider value.
|
customIndicator
(string|null)
|
Custom classes for a visual progress indicator tied to slider value.
|
thumbBackground
(default|current)
|
Uses current text color for thumb background when set to 'current'. Default: 'default'
|
radius
(boolean)
|
Controls rounded treatment on track/indicator. Default: true
|
Examples
Stepper
<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>