Range

Overview

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

Screenshots

Changelog

  • Added in version 5.6.2

Settings

Name Description
Default Value The default value loaded when editing a new post (when no value exists)
Minimum Value The minimum (numeric) value allowed, which must not be greater than its maximum value. Defaults to 0
Maximum Value The maximum (numeric) value allowed, which must not be less than its minimum value. 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

The Range field will return a numeric value. Below are some examples of how you can use this data. Please note that all following examples use a Range field called “font_size”, and if you are working with a sub field, remember to replace any get_field() and the_field() functions with the relative get_sub_field() and the_sub_field() functions.

Basic

This example shows how to use the selected value as a ‘font-size’ style for all <h2> elements.

 

<?php 

// vars
$font_size = get_field('font_size');

?>
<style type="text/css">
<?php if( $font_size ): ?>
	h2 {
		font-size: <?php echo $font_size; ?>px;
	}
<?php endif; ?>
</style>

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.