Range

A slider input for selecting a value within a range.

Examples

Basic Range

0 100
blade 
<x-plume::form 
    formData="{ 'volume': 50 }">
    <x-plume::form.range label="Volume" name="volume" min="0" max="100" model="volume" />
</x-plume::form>

Custom Steps

Error: Segment [steps] not found in {/var/www/resources/views/docs/samples/form-range.blade.php}
blade 
Error: Segment [steps] not found in {/var/www/resources/views/docs/samples/form-range.blade.php}
Prop Type Default Description
label string null The label for the range input.
name string null HTML name attribute.
id string null HTML id attribute. Auto-generated if not provided.
model string null AlpineJS model name for two-way binding.
value string '0' Initial range value. Ignored if $model is used.
min int 0 Minimum allowed value.
max int 100 Maximum allowed value.
step int 1 Incremental step value.

Usage

blade 
<x-plume::form >
    <x-plume::form.range label="Price Range" name="price" min="0" max="1000"
        step="10" model="price" />
</x-plume::form>