# dynamic\_slider

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

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2F7ZE3ZAe6NhGW0JbrOZNH%2Fimage.png?alt=media&#x26;token=a8b61f00-7a3d-4da2-85ac-77e7129ef2d2" alt=""><figcaption><p>Dynamic slider and units selection</p></figcaption></figure>

It supports the following properties:

<table data-header-hidden><thead><tr><th width="109"></th><th width="99"></th><th width="122"></th><th></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td><strong>Type</strong></td><td><strong>Default</strong></td><td><strong>Description</strong></td></tr><tr><td>options</td><td>Array</td><td></td><td><p>The property allows multiple number types. Example:<br></p><pre><code>[
  [
   'unit' => 'px',
    'min'  => 0,
    'max'  => 9999,
    'step' => 1,
  ],
]
</code></pre></td></tr><tr><td>default</td><td>String</td><td></td><td>The property adds the default value for number and unit:<br><code>'default'     => '100%',</code></td></tr></tbody></table>

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