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:

Name

Type

Default

Description

options

Array

The property allows multiple number types. Example:

[
  [
   'unit' => 'px',
    'min'  => 0,
    'max'  => 9999,
    'step' => 1,
  ],
]

default

String

The 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,
                    ],
                ],
            ]
        );

Last updated

Was this helpful?