Skip to main content

Slider

Drag the handle to select a numeric value.

slider option type — Theme Settings example
$options = [
'demo_slider' => [
'label' => __( 'Slider', 'unysonplus' ), // or false to hide the label column
'type' => 'slider',
'value' => 10,
'desc' => __( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'unysonplus' ),
'help' => sprintf( "%s \n\n'\"<br/><br/>\n\n <b>%s</b>",
__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'unysonplus' ),
__( 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'unysonplus' )
),
// — Optional attributes you can add —
// 'attr' => [ 'class' => 'my-class', 'data-foo' => 'bar' ], // extra HTML attributes
// 'properties' => [ 'min' => 0, 'max' => 100, 'step' => 1 ],
],
];

Reading the value​

slider returns a number — output it directly.

In a shortcode​

The shortcode framework passes the option values into view.php as $atts:

echo (float) $atts['demo_slider'];

In a page template — a per-page option​

Options defined on a post/page (a metabox) are read with fw_get_db_post_option():

$value = fw_get_db_post_option( get_the_ID(), 'demo_slider' );
echo (float) $value;

When the field is one of several inside a box/group, read the whole group once and pick fields by key — the common CPT pattern (e.g. a review or book box):

$book = fw_get_db_post_option( get_the_ID(), 'book' );
echo (float) $book['demo_slider'];

In Theme Settings — a global option​

Global options are read with fw_get_db_settings_option():

$value = fw_get_db_settings_option( 'demo_slider' );
echo (float) $value;

Saved value​

fw_print( fw_get_db_settings_option( 'demo_slider' ) ) outputs — the shape of this option type's stored value:

7

In Gutenberg blocks (the React control)​

slider is one of the option types that also has a React version, so it can appear inside a Gutenberg block's sidebar.

Everything above is rendered by PHP — _render() builds the HTML and jQuery makes it interactive. That works in the page builder and on Theme Settings, which are ordinary admin pages. A block's settings sidebar is a React app, which draws the whole panel itself and will not accept ready-made HTML from PHP.

So the option type gets a second renderer. Both read the same schema — the array you write in options.php — and both produce the same saved value. The PHP path stays authoritative; the React path is additive. See text for the full explanation of how the two fit together.

What the slider control does​

It wraps WordPress's RangeControl, reading its bounds from properties:

Schema keyBecomes
labelthe field label
descthe help text
properties.minthe range minimum
properties.maxthe range maximum
properties.stepthe step increment

The stored value is a number — _get_value_from_input() ends in floatval(), so the control emits 40, never the string "40" an input element would otherwise give. Storing the wrong one makes a value compare unequal to itself across the two renderers.

The same control also serves short-slider, which differs only in rendered width on PHP-driven admin screens — a distinction a block sidebar has nothing to express.