Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, 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 {{ $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 →