[FIXED] How to set/connect the Slider Numbers states with the slider?

Issue

on the left and right side of my slider are the states (numbers/price) from and until how much you can search Products (Price-Slider /Price-Filter). But the numbers are static, so If I use the slider then the numbers stay the same... I would like the numbers to change with the slider. How I can connect the numbers with my Slider?

Please see here (yellow marked)->SliderStates

Here the HTML Info of my filter:

<form action="https://entdeckepreise.de/filter/produktfilter/" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group">
    <label for="price7068" class="control-label">Nach Preis</label>
    <div class="slide">
        <span>1</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 0%;"></div>
                <div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
                    aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 € - 4721 €</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 0%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 47.2047%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">4721</div>
            </div>
        </div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
            data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
            data-value="1,4721" style="display: none;">
        <span>10000</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="product_rating4028" class="control-label">Nach Bewertung</label>
    <div class="slide">
        <span>0</span>
        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0px; width: 20%;"></div>
                <div class="slider-selection" style="left: 20%; width: 80%;"></div>
                <div class="slider-track-high" style="right: 0px; width: 0%;"></div>
                <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
                <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
                    aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1 Sterne - 5 Sterne</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation"
                style="left: 20%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">1</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation"
                style="left: 100%; margin-left: 0px; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">5</div>
            </div>
        </div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
            class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
            data-slider-value="[0,5]" data-value="1,5" style="display: none;">
        <span>5</span>
    </div>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="marke2417" class="control-label">Nach Marke</label>
    <select id="marke2417" name="marke[]" class="form-control" multiple="">
        <option value="msi">MSI</option>
        <option value="nokia">Nokia</option>
        <option value="samsung">Samsung</option>
        <option value="sony">Sony</option>
    </select>
    <div class="clearfix"></div>
</div>
<div class="form-group">
    <label for="kategorie5529" class="control-label">Nach Kategorie</label>
    <select id="kategorie5529" name="kategorie" class="form-control">
        <option value="">Kategorie wählen</option>
        <option value="automotorrad">Auto &amp; Motorrad</option>
        <option value="babykinderwelt">Baby &amp; Kinderwelt</option>
        <option value="computersoftware">Computer &amp; Software</option>
        <option value="druckerscanner">&nbsp;&nbsp;Drucker &amp; Scanner</option>
        <option value="3ddruckerk">&nbsp;&nbsp;&nbsp;&nbsp;3D-Drucker</option>
    </select>
    <div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
    name="orderby" value="">
<div class="form-group form-group-block">
    <a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
    <button type="submit" class="btn btn-at">
        Filtern </button>

</div>

<div class="clearfix"></div>

Also my Price-Slide-PHP-Code:

// values & steps
        $values = at_field_database_min_max_value( $this->name, 'product' );
        if ( isset( $this->field['min_value'] ) && $this->field['min_value'] != false ) $values->min = $this->field['min_value'];
        if ( isset( $this->field['max_value'] ) && $this->field['max_value'] != false ) $values->max = $this->field['max_value'];
        $steps = at_field_step_value( $values->min, $values->max, '', $this->name );
        ?>
        <div class="form-group">
            <label for="<?php echo $this->id; ?>" class="control-label"><?php echo $title ?></label>
            <div class="slide">
                <span><?php echo $values->min; ?></span>
                <input id="<?php echo $this->id; ?>" name="<?php echo $this->name; ?>" data-slider-label="<?php echo apply_filters( 'at_filter_price_label', ' ' . at_get_default_currency( true ) ); ?>" type="text" class="bt-slider" value="<?php if ( $this->value ) {
                    echo $this->value;
                } ?>" data-slider-min="<?php echo $values->min; ?>" data-slider-max="<?php echo $values->max; ?>" data-slider-step="<?php echo $steps; ?>" data-slider-value="[<?php if ( $this->value ) {
                    echo $this->value;
                } else {
                    echo $values->min . ',' . $values->max;
                } ?>]">
                <span><?php echo $values->max; ?></span>
            </div>
            <?php echo( $instruction ? '<span class="filter-instruction">' . $instruction . '</span>' : '' ); ?>
            <div class="clearfix"></div>
        </div>

Solution

Replace the script i provided you before by this:

    let filterForm = document.querySelector("form.filterform");
if (null !== filterForm) {
    let waitS = setInterval(wait_sliders, 200);
    function wait_sliders() {
        if (null !== filterForm.querySelector(".slider-handle")) {

            // Listen new values
            let slides = filterForm.querySelectorAll('.slide');
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.type === "attributes") {
                        let values = mutation.target.value.split(',');
                        let spans = mutation.target.closest('.slide').querySelectorAll('span');
                        spans[0].innerText = values[0];
                        spans[spans.length - 1].innerText = values[1];
                    }
                });
            });
            
            slides.forEach(slide => {
                let el = slide.querySelector('.bt-slider');
                observer.observe(el, { attributes: true });
            });
            
            filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) => {
                let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
                for (let i = 0; i < event.length; i++) {
                    e.addEventListener(event[i], (e) => {
                        filterForm.querySelector('button[type="submit"]').click();
                    });
                }
            }),
                filterForm.querySelector('button[type="submit"]').click();
            clearInterval(waitS);
        }
    }
}

Answered By - Younes Bennour