Aşağıdaki görseldeki gibi bir ayar alanı ekledim ancak rakamsal değer hiç bir yerde yazmadığı için ne seçildiği anlaşılmıyor. Text olarak Input içeriğini nasıl ekrana yazdırabilirim? 0-100 arası 5+5+5 şeklinde artıyor.

Görsel:

Kodlar:
class Laura {
    private $config = '{"title":"Cat Characteristics","prefix":"cat_haracteristic_","domain":"laura","class_name":"Laura","post-type":["post"],"context":"side","priority":"low","fields":[{"type":"range","label":"Playfulness","default":"50","max":"100","step":"5","id":"cat_haracteristic_playfulness"},{"type":"range","label":"Vocality","default":"50","max":"100","step":"5","id":"cat_haracteristic_vocality"},{"type":"range","label":"Activity Level","default":"50","max":"100","step":"5","id":"cat_haracteristic_activity-level"},{"type":"range","label":"Affection Towards Owners","default":"50","max":"100","step":"5","id":"cat_haracteristic_affection-towards-owners"},{"type":"range","label":"Independence","default":"50","max":"100","step":"5","id":"cat_haracteristic_independence"},{"type":"range","label":"Docility","default":"50","max":"100","step":"5","id":"cat_haracteristic_docility"},{"type":"range","label":"Intelligence","default":"50","max":"100","step":"5","id":"cat_haracteristic_intelligence"},{"type":"range","label":"Need for Attention","default":"50","max":"100","step":"5","id":"cat_haracteristic_need-for-attention"},{"type":"range","label":"Need for Grooming","default":"50","max":"100","step":"5","id":"cat_haracteristic_need-for-grooming"},{"type":"range","label":"Shedding","default":"50","max":"100","step":"5","id":"cat_haracteristic_shedding"},{"type":"range","label":"Health and Hardiness","default":"50","max":"100","step":"5","id":"cat_haracteristic_health-and-hardiness"},{"type":"range","label":"Friendship with Other Pets","default":"50","max":"100","step":"5","id":"cat_haracteristic_friendship-with-other-pets"},{"type":"range","label":"Friendship with Children","default":"50","max":"100","step":"5","id":"cat_haracteristic_friendship-with-children"},{"type":"range","label":"Social Needs","default":"50","max":"100","step":"5","id":"cat_haracteristic_social-needs"}]}';

    public function __construct() {
        $this->config = json_decode( $this->config, true );
        add_action( 'add_meta_boxes', [ $this, 'add_meta_boxes' ] );
        add_action( 'save_post', [ $this, 'save_post' ] );
    }

    public function add_meta_boxes() {
        foreach ( $this->config['post-type'] as $screen ) {
            add_meta_box(
                sanitize_title( $this->config['title'] ),
                $this->config['title'],
                [ $this, 'add_meta_box_callback' ],
                $screen,
                $this->config['context'],
                $this->config['priority']
            );
        }
    }

    public function save_post( $post_id ) {
        foreach ( $this->config['fields'] as $field ) {
            switch ( $field['type'] ) {
                default:
                    if ( isset( $_POST[ $field['id'] ] ) ) {
                        $sanitized = sanitize_text_field( $_POST[ $field['id'] ] );
                        update_post_meta( $post_id, $field['id'], $sanitized );
                    }
            }
        }
    }

    public function add_meta_box_callback() {
        $this->fields_div();
    }

    private function fields_div() {
        foreach ( $this->config['fields'] as $field ) {
            ?><div class="components-base-control">
                <div class="components-base-control__field"><?php
                    $this->label( $field );
                    $this->field( $field );
                ?></div>
            </div><?php
        }
    }

    private function label( $field ) {
        switch ( $field['type'] ) {
            default:
                printf(
                    '<label class="components-base-control__label" for="%s">%s</label>',
                    $field['id'], $field['label']
                );
        }
    }

    private function field( $field ) {
        switch ( $field['type'] ) {
            case 'range':
                $this->input_minmax( $field );
                break;
            default:
                $this->input( $field );
        }
    }

    private function input( $field ) {
        printf(
            '<input class="components-text-control__input %s" id="%s" name="%s" %s type="%s" value="%s">',
            isset( $field['class'] ) ? $field['class'] : '',
            $field['id'], $field['id'],
            isset( $field['pattern'] ) ? "pattern='{$field['pattern']}'" : '',
            $field['type'],
            $this->value( $field )
        );
    }

    private function input_minmax( $field ) {
        printf(
            '<input class="components-text-control__input" id="%s" %s %s name="%s" %s type="%s" value="%s">',
            $field['id'],
            isset( $field['max'] ) ? "max='{$field['max']}'" : '',
            isset( $field['min'] ) ? "min='{$field['min']}'" : '',
            $field['id'],
            isset( $field['step'] ) ? "step='{$field['step']}'" : '',
            $field['type'],
            $this->value( $field )
        );
    }

    private function value( $field ) {
        global $post;
        if ( metadata_exists( 'post', $post->ID, $field['id'] ) ) {
            $value = get_post_meta( $post->ID, $field['id'], true );
        } else if ( isset( $field['default'] ) ) {
            $value = $field['default'];
        } else {
            return '';
        }
        return str_replace( '\u0027', "'", $value );
    }

}
new Laura;