dynamic_slider

This option allows the user to add a number value with a unit.

Dynamic slider and units selection

It supports the following properties:

NameTypeDefaultDescription
optionsArray
The property allows multiple number types. Example:
[
[
   'unit' => 'px',
   'min'  => 0,
    'max'  => 9999,
    'step' => 1,
],
]
defaultStringThe property adds the default value for number and unit:
'default'     => '100%',

Below is the following example of how the option can be used:

$options->add_option(
            'height',
            [
                'type'                    => 'dynamic_slider',
                'description'             => esc_html__( 'Set theheight.' ),
                'title'                   => esc_html__( 'Height', 'zionbuilder' ),
                'default'                 => '400px',
                'show_responsive_buttons' => true,
                'sync'                    => '_styles.wrapper.styles.%%RESPONSIVE_DEVICE%%.default.height',
                'options'                 => [
                    [
                        'unit' => 'px',
                        'min'  => 0,
                        'max'  => 999,
                        'step' => 1,
                    ],
                    [
                        'unit' => '%',
                        'min'  => 0,
                        'max'  => 999,
                        'step' => 1,
                    ],
                    [
                        'unit' => 'pt',
                        'min'  => 0,
                        'max'  => 999,
                        'step' => 1,
                    ],
                    [
                        'unit' => 'em',
                        'min'  => 0,
                        'max'  => 999,
                        'step' => 1,
                    ],
                    [
                        'unit' => 'rem',
                        'min'  => 0,
                        'max'  => 999,
                        'step' => 1,
                    ],
                    [
                        'unit' => 'vh',
                        'min'  => 0,
                        'max'  => 100,
                        'step' => 1,
                    ],
                ],
            ]
        );

Was this article helpful ?

103 people consider this article helpful
Thank you! We will improve this article.

Didn’t find what you’re looking for? Please let us know

Submit a ticket