All you'll need > Range slider

Select a value from a range using a slider. The <x-range> component is suitable for quick selection of integer values where getting the exact desired value is not important.

<x-range value="80"/>

#Styling

#Color

Use color={neutral|primary|secondary|accent|info|success|warning|error} to change the color of the slider.

Neutral

Primary

Secondary

Accent

Info

Success

Warning

Error

Neutral   <x-range color="neutral"   min="0" max="100" value="80"/>
Primary   <x-range color="primary"   min="0" max="100" value="70"/>
Secondary <x-range color="secondary" min="0" max="100" value="60"/>
Accent    <x-range color="accent"    min="0" max="100" value="50"/>
Info      <x-range color="info"      min="0" max="100" value="40"/>
Success   <x-range color="success"   min="0" max="100" value="30"/>
Warning   <x-range color="warning"   min="0" max="100" value="20"/>
Error     <x-range color="error"     min="0" max="100" value="10"/>

#Size

Huge

Large

Medium

Small

Tiny

Huge   <x-range size="xl" value="80"/>
Large  <x-range size="lg" value="70"/>
Medium <x-range size="md" value="60"/>
Small  <x-range size="sm" value="50"/>
Tiny   <x-range size="xs" value="40"/>

#Min, max and step attributes

You can change the range of values that the slider covers with the min and max attributes, and you can make it so that only some values at regular intervals are selectable with the step attribute.

The component does not check that values for min, max and step are consistent and leaves it up to you to choose correct values.

Default (0 - 100)

-500 - 500

10 by 10

<div x-data="{ value: 0 }" class="relative w-full max-w-80 space-y-2">
  <span class="absolute">Default (0 - 100)</span>
  <span class="block w-full text-5xl font-light text-center" x-text="value"></span>
  <x-range x-model="value"/>
</div>

<div x-data="{ value: 0 }" class="relative w-full max-w-80 space-y-2">
  <span class="absolute">-500 - 500</span>
  <span class="block w-full text-5xl font-light text-center" x-text="value"></span>
  <x-range min="-500" max="500" x-model="value"/>
</div>

<div x-data="{ value: 0 }" class="relative w-full max-w-80 space-y-2">
  <span class="absolute">10 by 10</span>
  <span class="block w-full text-5xl font-light text-center" x-text="value"></span>
  <x-range step="10" x-model="value"/>
</div>

#Showing steps

Use the optional show-steps and its associated minor attributes to show the values selectable by your range slider.
If you do not specify a value for the attributes, the added indicators will show every selectable value and every other value will be minor (you probably do not want to leave a wide gap between min and max, with a small value for step).

The component will not verify the value you specify for show-steps is consistent with step. It will also not verify that the shown values are far enough apart not to overlap on screen.

100

<x-range size="xs" max="10" value="3" show-steps/>

<x-range step="25" value="75" show-steps/>

<x-range size="xl" step="25" value="50" show-steps minor/>

<x-range step="10" value="30" show-steps="50" minor="10"/>

<x-range step="5" value="45" show-steps="50" minor="20"/>