TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Form Range

Form range component.

# Basic Usage 

<x-range />

# Label & Hint

Select an average desired salary 
<x-range label="Quantity" hint="Select an average desired salary" />

# Dual Mode
NEW

An option to pick an interval with two thumbs over a shared track.

Bound value: 200 to 800 

<x-range dual :min="0" :max="1000" :step="10" label="Price range" />

Unlike the single mode, the bound property is always an indexed pair, [start, end] . When the bound value is blank the pair starts at [min, max] . In dual mode min , max and step default to 0 , 100 and 1 . The segment between the thumbs is painted with the component color .

The thumbs never cross. Dragging the starting thumb past the ending one stops it at that value, and the other way around. Both landing on the same value is allowed, and while they overlap the one that still has room to move stays on top, so neither gets stuck. 

<x-range dual :min="0" :max="1000" color="emerald" tooltip />

Use tooltip to show the value of the thumb being dragged, hidden on release. The bubble is the same balloon the tooltip component renders, anchored on an invisible marker kept over the thumb, so it follows the balloon color, scale and styling set for every tooltip and has no color or size settings of its own. The pair reaches the server when the thumb is released rather than on every intermediate value, so a drag costs a single round trip, wire:model.live included.

tooltip and an array value both require dual and throw otherwise. In dual mode the component also throws when min is not below max , when step is zero, negative or wider than the distance between the boundaries, or when the bound value is not a numeric pair inside those boundaries with the first value below the second.

# Readonly & Disabled 

<x-range label="Readonly" value="50" readonly />
<x-range label="Disabled" value="50" disabled />

# Size Variations 

<x-range sm />
<x-range md />
<x-range lg />

# Color Variations 

<x-range label="Primary" />
<x-range color="secondary" label="Secondary" />
<x-range color="slate" label="Slate" />
<x-range color="gray" label="Gray" />
<x-range color="zinc" label="Zinc" />
<x-range color="neutral" label="Neutral" />
<x-range color="stone" label="Stone" />
<x-range color="red" label="Red" />
<x-range color="orange" label="Orange" />
<x-range color="amber" label="Amber" />
<x-range color="yellow" label="Yellow" />
<x-range color="lime" label="Lime" />
<x-range color="green" label="Green" />
<x-range color="emerald" label="Emerald" />
<x-range color="teal" label="Teal" />
<x-range color="cyan" label="Cyan" />
<x-range color="sky" label="Sky" />
<x-range color="blue" label="Blue" />
<x-range color="indigo" label="Indigo" />
<x-range color="violet" label="Violet" />
<x-range color="purple" label="Purple" />
<x-range color="fuchsia" label="Fuchsia" />
<x-range color="pink" label="Pink" />
<x-range color="rose" label="Rose" />
<x-range color="mauve" label="Mauve" />
<x-range color="olive" label="Olive" />
<x-range color="mist" label="Mist" />
<x-range color="taupe" label="Taupe" />
<x-range color="black" label="Black" />

Code highlighting provided by Torchlight