Slider Field

A range slider input for selecting a numeric value visually.

Last updated: June 15, 2026

A draggable range slider for selecting a numeric value visually.

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, container width, and similar values.

For a plain numeric input without a slider interface, use the Number field.

Field Registration

[
    'id'          => 'container_width',
    'type'        => 'slider',
    'title'       => __( 'Container Width', 'your-textdomain' ),
    'subtitle'    => __( 'Maximum width of the main content container', 'your-textdomain' ),
    'default'     => 1200,
    'min'         => 760,
    'max'         => 1600,
    'step'        => 10,
    'unit'        => 'px',
    'showTooltip' => true,
]

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`	—	Descriptive text shown below the label
`desc`	`string`	—	Alternative to `subtitle` — shown in the same position
`default`	`int\|float`	—	Default numeric value
`min`	`int\|float`	—	Minimum value. Default: `0`
`max`	`int\|float`	—	Maximum value. Default: `100`
`step`	`int\|float`	—	Increment step. Default: `1`. Use a decimal (e.g. `0.1`) for float inputs
`unit`	`string`	—	Unit label shown beside the value — e.g. `'px'`, `'%'`, `'ms'`
`showTooltip`	`bool`	—	Show a tooltip above the slider thumb displaying the current value while dragging. Default: `true`
`required`	`array`	—	Conditional logic rules — see Conditional Logic

Return Value

Type: int|float

Returns an integer when step is a whole number, or a float when step has decimal places. Returns the default value if nothing has been saved yet.

$container_width = themeplus_get_option( 'container_width', 1200 );
// Returns: 1200 (int)

$overlay_opacity = themeplus_get_option( 'overlay_opacity', 0.5 );
// Returns: 0.5 (float) — when step is 0.1

Usage Examples

Container width

$container_width = themeplus_get_option( 'container_width', 1200 );

echo '<style>
    :root {
        --container-width: ' . absint( $container_width ) . 'px;
    }
</style>';

Opacity value

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

$opacity = themeplus_get_option( 'overlay_opacity', 50 );

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

Border radius

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

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

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

Animation duration

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

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

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

Float step — line height

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

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

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

With a conditional field

[
    '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

Returns int for whole-number steps and float for decimal steps. Use absint() for guaranteed non-negative integers, or (float) cast for explicit float typing.
The unit label is display-only — it is not stored with the value. Always append the unit yourself when building CSS strings (e.g. absint( $value ) . 'px').
showTooltip defaults to true — set it to false to hide the value tooltip while dragging.
For a plain numeric input without a slider, use the Number field.

Quick Links