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



  • Added in version 5.6.2.


  • 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.


$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;
<?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>

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.