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>
Supercharge Your Website With Premium Features Using ACF PRO
Speed up your workflow and unlock features to better develop websites using ACF Blocks and Options Pages, with the Flexible Content, Repeater, Clone, Gallery Fields & More.
