Description
The Range field provides an interactive experience for selecting a numerical value between specific endpoints.
Screenshots
Changelog
- Added in version 5.6.2.
Settings
-
Default Value
The default value loaded when editing a new post (when no value exists). -
Minimum Value
The minimum (numeric) value allowed. Defaults to 0. -
Maximum Value
The maximum (numeric) value allowed. Defaults to 100. -
Step Size
The increment at which a numeric value can be set. Defaults to 1. -
Prepend
HTML displayed before (to the left) of the range input. -
Append
HTML displayed after (to the right) of the range input.
Template usage
Display value within CSS
This example demonstrates how a Range field value can be used to control the font-size of all <h2>
elements.
<?php
$h2_font_size = get_field('h2_font_size');
if( $h2_font_size ): ?>
<style type="text/css">
h2 {
font-size: <?php echo $h2_font_size; ?>px;
}
</style>
<?php endif; ?>
Display value as text.
This example demonstrates how to display a Range field value as text.
<p>Searching for houses within a <?php the_field('search_radius'); ?>km radius.</p>