Responsive Range

A range slider that stores three independent values — one each for desktop, tablet, and mobile. Each breakpoint has both a drag slider and a number input, plus a shared unit selector (px, %, em, rem, vw, etc.).

Settings

Return values

Returns an associative array with desktop, tablet, and mobile keys. Each value is a string combining the number and unit.

$spacing = get_field('section_padding');
// [
//   'desktop' => '60px',
//   'tablet'  => '40px',
//   'mobile'  => '20px',
// ]

Usage

Outputting CSS custom properties

$padding = get_field('hero_padding');

if ($padding) {
    echo '<style>';
    echo ':root {';
    echo '--hero-padding-desktop: ' . esc_attr($padding['desktop']) . ';';
    echo '--hero-padding-tablet: '  . esc_attr($padding['tablet'])  . ';';
    echo '--hero-padding-mobile: '  . esc_attr($padding['mobile'])  . ';';
    echo '}';
    echo '</style>';
}

Then in your stylesheet:

.hero {
    padding: var(--hero-padding-mobile);
}

@media (min-width: 768px) {
    .hero { padding: var(--hero-padding-tablet); }
}

@media (min-width: 1024px) {
    .hero { padding: var(--hero-padding-desktop); }
}

Inline responsive style block

$font_size = get_field('heading_size');
$post_id   = get_the_ID();

if ($font_size) {
    echo '<style>';
    echo '#post-' . $post_id . ' h1 { font-size: ' . esc_attr($font_size['mobile'])  . '; }';
    echo '@media(min-width:768px){#post-' . $post_id . ' h1{font-size:' . esc_attr($font_size['tablet'])  . ';}}';
    echo '@media(min-width:1024px){#post-' . $post_id . ' h1{font-size:' . esc_attr($font_size['desktop']) . ';}}';
    echo '</style>';
}