Range

Description

The Range field provides an interactive experience for selecting a numerical value between specific endpoints.

Screenshots

The Range field interface

The Range field settings

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>