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

QuickWebP – WebP & AVIF Image Optimizer, Compression & SEO for WordPress, version 4.0.1. 34 lines.

- Page: https://pluginprobe.com/plugins/quickwebp/4.0.1/code/admin/components/range-slider.php
- Raw: https://pluginprobe.com/plugins/quickwebp/4.0.1/raw/admin/components/range-slider.php
- Modified: 2026-08-05T15:56:08+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/4.0.1/code/admin/components/range-slider.php#L10-L20`.

```php
<?php 
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Range slider component for the settings page
 */

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

//phpcs:ignore WordPress.Security.NonceVerification.Missing
if( isset( $quickwebp_key_option, $_POST[ $quickwebp_key_option ] ) ) {
	//phpcs:ignore WordPress.Security.NonceVerification.Missing
    $quickwebp_value_to_save = sanitize_text_field( wp_unslash( $_POST[ $quickwebp_key_option ] ) );
    update_option( $quickwebp_key_option, $quickwebp_value_to_save );
}
?>

<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( $quickwebp_key_option ?? '' ); ?>"
        id="<?php echo esc_attr( $quickwebp_key_option ?? '' ); ?>"
        value="<?php echo esc_html( get_option( $quickwebp_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( $quickwebp_key_option ?? '', $data['default'] ?? '' ) ); ?></span>
        <span class="value-unit"><?php echo esc_html( $data['unit'] ?? '' ); ?></span>
    </span>
    <div class="progress"></div>
</div>
```