Those little boxes you tick to choose one or more options, like selecting toppings for your pizza.
php artisan spur:add forms/range
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'forms/range',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.range min="100" max="1000" value="200"/><x-spur.field id="range-label" type="range">
<x-spur.label>Price</x-spur.label>
<x-spur.range name="price-label" />
</x-spur.field>This will be the selling price for the product.
<x-spur.field id="range-label-desc" type="range">
<x-spur.label>Selling Price</x-spur.label>
<x-spur.range name="selling-price-desc" />
<x-spur.description>This will be the selling price for the product.</x-spur.description>
</x-spur.field>This will be the selling price for the product.
<x-spur.field id="range-inline" type="range" inline>
<x-spur.label>Selling Price</x-spur.label>
<x-spur.range name="selling-price-desc" />
<x-spur.description>This will be the selling price for the product.</x-spur.description>
</x-spur.field>This will be the selling price for the product.
<x-spur.field id="range-disabled" type="range" disabled>
<x-spur.label>Selling Price</x-spur.label>
<x-spur.range name="selling-price-disabled" />
<x-spur.description>This will be the selling price for the product.</x-spur.description>
</x-spur.field>This will be the selling price for the product.
<x-spur.field id="range-invalid" type="range" invalid>
<x-spur.label>Selling Price</x-spur.label>
<x-spur.range name="selling-price-invalid" />
<x-spur.description>This will be the selling price for the product.</x-spur.description>
</x-spur.field><x-spur.range />
<x-spur.range color="indigo" />
<x-spur.range color="blue" />
<x-spur.range color="green" />
<x-spur.range color="yellow" />
<x-spur.range color="red" />