Slider Field

Overview

The Slider field renders a draggable range slider with a live numeric display. Use it for any numeric option where a visual range control is more intuitive than typing a number — opacity, font size, border radius, spacing, animation duration, and similar values.

---

Field Registration

php

[
    'id'       => 'content_opacity',
    'type'     => 'slider',
    'title'    => __('Content Opacity', 'your-textdomain'),
    'subtitle' => __('Opacity of the main content area', 'your-textdomain'),
    'default'  => 100,
    'min'      => 0,
    'max'      => 100,
    'step'     => 1,
    'unit'     => '%',
]

---

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — used as the option key
type	string	✅	Must be slider
title	string	✅	Label shown above the field
subtitle	string	—	Smaller descriptive text shown below the label
desc	string	—	Help text shown below the slider
default	int|float	—	Default numeric value
min	int|float	—	Minimum value — default is 0
max	int|float	—	Maximum value — default is 100
step	int|float	—	Increment step — default is 1
unit	string	—	Unit label shown beside the value (e.g. px, %, ms)
required	array	—	Conditional logic rules — see Conditional Logic

---

Return Value

Type: string

Returns the selected numeric value as a string, or the default value if nothing has been saved yet. Cast to int or float as needed.

php

$opacity = themeplus_get_option( 'content_opacity', 100 );
// Returns: '100'

---

Usage Examples

Opacity value

php

$opacity = themeplus_get_option( 'content_opacity', 100 );

echo '<style>
    .site-content {
        opacity: ' . ( absint( $opacity ) / 100 ) . ';
    }
</style>';

Border radius

php

[
    'id'      => 'button_radius',
    'type'    => 'slider',
    'title'   => __('Button Border Radius', 'your-textdomain'),
    'default' => 4,
    'min'     => 0,
    'max'     => 50,
    'step'    => 1,
    'unit'    => 'px',
]

php

$radius = themeplus_get_option( 'button_radius', 4 );

echo '<style>
    .btn {
        border-radius: ' . absint( $radius ) . 'px;
    }
</style>';

Animation duration

php

[
    'id'      => 'transition_speed',
    'type'    => 'slider',
    'title'   => __('Transition Speed', 'your-textdomain'),
    'default' => 300,
    'min'     => 100,
    'max'     => 1000,
    'step'    => 50,
    'unit'    => 'ms',
]

php

$speed = themeplus_get_option( 'transition_speed', 300 );

echo '<style>
    :root {
        --transition-speed: ' . absint( $speed ) . 'ms;
    }
</style>';

Float step for line height

php

[
    'id'      => 'body_line_height',
    'type'    => 'slider',
    'title'   => __('Body Line Height', 'your-textdomain'),
    'default' => 1.6,
    'min'     => 1,
    'max'     => 3,
    'step'    => 0.1,
]

php

$line_height = themeplus_get_option( 'body_line_height', 1.6 );

echo '<style>
    body {
        line-height: ' . floatval( $line_height ) . ';
    }
</style>';

With a conditional field

php

[
    'id'      => 'enable_overlay',
    'type'    => 'toggle',
    'title'   => __('Enable Hero Overlay', 'your-textdomain'),
    'default' => true,
],
[
    'id'       => 'overlay_opacity',
    'type'     => 'slider',
    'title'    => __('Overlay Opacity', 'your-textdomain'),
    'default'  => 50,
    'min'      => 0,
    'max'      => 100,
    'step'     => 5,
    'unit'     => '%',
    'required' => ['enable_overlay', '==', true],
],

---

Notes

• The field returns a string — use absint() for whole numbers or floatval() for decimal values before using in CSS or PHP logic.
• Use step with a decimal value (e.g. 0.1) when you need float precision, such as for line height or opacity ratios.
• For a plain numeric input without a slider interface, use the Number field instead.