# slider

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FElkkB1qWXDtE8qapc9BN%2Fimage.png?alt=media&#x26;token=0a64a841-682e-4dcf-8306-3cc431ce7e06" alt=""><figcaption><p>Slider with ‘px’ content</p></figcaption></figure>

This option allows user to show a slider for easily input a number value.

It supports the following properties:

<table data-header-hidden><thead><tr><th width="126"></th><th width="145"></th><th width="119"></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>min</td><td>Number</td><td></td><td>The property shows the minimum input value</td></tr><tr><td>max</td><td>Number</td><td></td><td>The property shows the maximum input value</td></tr><tr><td>step</td><td>Number</td><td>1</td><td>Step to the next value</td></tr><tr><td>shiftStep</td><td>Number</td><td>10</td><td>Step when pressing shift key</td></tr><tr><td>content</td><td>String</td><td></td><td>String that displays the units</td></tr></tbody></table>

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

```
public function options( $options ) {     
    $options->add_option( 
            'height',             
             [ 
               'type'      => 'slider',
                'title'     => __( 'Height', 'zionbuilder' ),
                'default'   => 13,
                'min'       => 1,
                'max'       => 100,
                'step'      => 1,
                'content'   => 'px',  
             ]
         ); 
}
```
