# quickwebp/3.0.0/admin/components/range-slider.php

QuickWebP – WebP & AVIF Image Optimizer, Compression & SEO for WordPress, version 3.0.0. 29 lines.

- Page: https://pluginprobe.com/plugins/quickwebp/3.0.0/code/admin/components/range-slider.php
- Raw: https://pluginprobe.com/plugins/quickwebp/3.0.0/raw/admin/components/range-slider.php
- Modified: 2023-05-25T10:15:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/quickwebp/3.0.0/code/admin/components/range-slider.php#L10-L20`.

```php
<?php 
/**
 * Range slider component for the settings page
 */

$key_option = sanitize_key( $data['name'] );

if( isset( $key_option, $_POST[ $key_option ] ) ) {
    update_option( $key_option, stripslashes( sanitize_text_field( $_POST[ $key_option ] ) ) );
}
?>

<div class="rang-slider regular-text">
    <input 
        type="range"
        min="<?php echo esc_attr( $data['min'] ?? 1 ); ?>"
        max="<?php echo esc_attr( $data['max'] ?? 100 ); ?>"
        step="<?php echo esc_attr( $data['step'] ?? 1 ); ?>"
        name="<?php echo esc_attr( $key_option ?? '' ); ?>"
        id="<?php echo esc_attr( $key_option ?? '' ); ?>"
        value="<?php echo esc_html( get_option( $key_option ?? '', $data['default'] ?? '' ) ); ?>"
        <?php echo isset( $data['pattern'] ) ? 'pattern="' . esc_attr( $data['pattern'] ) . '"' : ''; ?>
    >
    <span class="value">
        <span class="value-num"><?php echo esc_html( get_option( $key_option ?? '', $data['default'] ?? '' ) ); ?></span>
        <span class="value-unit"><?php echo esc_html( $data['unit'] ?? '' ); ?></span>
    </span>
    <div class="progress"></div>
</div>
```