Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, Developer

Range Fieldtype

Range fields let the user choose a numeric value which must be no less than a given value, and no more than another.

Range Fieldtype UI
The Range Fieldtype in action!

Data Structure

The value is stored as an integer.

number: 42

Templating

Use the variable in your templates to display the value. That's pretty much it.

<p>My favorite number is {{ number }}.</p>
<p>My favorite number is 42.</p>

Options

min

integer

The minimum, left-most value. Default 0.

max

integer

The maximum, left-most value. Default 1000.

step

integer

The minimum size between values. Default 1.

append

string

Add text to the end (right-side) of the range slider.

prepend

string

Add text to the beginning (left-side) of the range slider.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →