范围输入WP定制器的无效值错误

Question

范围输入值在wp自定义程序中不起作用。这是我的类wordpress的自定义控制和咆哮，这是js代码。

<?php
    // Range Control Wwith Selected Value Indicator
    class WP_Customize_Range_Control extends WP_Customize_Control
    {
        public $type = 'custom_range';
        public function enqueue()
        {
            wp_enqueue_script(
                'cs-range-control',
                BLOCKS_URL . '/lib/js/controls.js',
                array('jquery-ui-slider'),
                false,
                true
            );
        }
        public function render_content()
        {
            ?>
            <label>
                <?php if ( ! empty( $this->label )) : ?>
                    <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <?php endif; ?>
                <div class="cs-range-value"><?php echo esc_attr($this->value()); ?></div>
                <input data-input-type="range" type="range" <?php $this->input_attrs(); ?> value="<?php echo esc_attr($this->value()); ?>" <?php $this->link(); ?> />
                <?php if ( ! empty( $this->description )) : ?>
                    <span class="description customize-control-description"><?php echo $this->description; ?></span>
                <?php endif; ?>
            </label>
            <?php
        }
    }

//这是JS

(function ($) {
    $(document).ready(function ($) {
        $('input[data-input-type="range"]').on('change', function () {
            var val = $(this).val();
            $(this).prev('.cs-range-value').html(val);
            $(this).val(val);
        });
    })
})(jQuery);

当我在WP定制器中更改滑块的值时，我会得到一个无效值的错误。为什么会发生这种事，我该怎么解决呢？

Answer 1

不妨试试这个：

'sanitize_callback' => 'intval',

Answer 2

Fix:将enqued脚本更改为jquery，然后才进行设置，而不进行sanitize回调(以前使用过sanitize intvl，如wp所说的)。

$wp_customize->add_setting( 'wca_header_opacity', array(
    'default' => '',
    'transport' => 'postMessage',
    ) );

    $wp_customize->add_control(
    new WP_Customize_Range_Control(
        $wp_customize,
        'header_opacity',
        array(
            'label'       => __('Header Opacity When Fixed'),
            'section'     => 'wca_header_section_design',
            'settings'    => 'wca_header_opacity',
            'context'    => 'wca_header_opacity',
            'description' => __('Set transparency for header when is fixed for an awesome effect !'),
            'input_attrs' => array(
                'min' => 0,
                'max' => 1,
                'step' => 'any',
            ),
            'priority'   => 10
        )
    )
    );