如何将滑块两侧的数值状态与价格筛选滑块实现联动绑定？

滑块数值联动实现方案 #

你当前使用的是Bootstrap Slider组件，仅需两步即可实现左右数值随滑块拖动同步更新：

1. 修改PHP模板，给左右数值标签加标识 #

修改价格滑块、评分滑块输出的PHP代码，给包裹滑块的.slide容器内的左右两个<span>标签添加专属类名，方便JS定位更新：

<div class="slide">
    <!-- 左侧最小值标签添加slide-min-val类 -->
    <span class="slide-min-val"><?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;
    } ?>]">
    <!-- 右侧最大值标签添加slide-max-val类 -->
    <span class="slide-max-val"><?php echo $values->max; ?></span>
</div>

评分滑块的PHP逻辑和价格滑块一致，同样添加上述两个类名即可。

2. 新增JS联动逻辑 #

将以下代码加入页面自定义JS文件，或放在页脚</body>标签前即可生效：

原生JS版本

document.addEventListener('DOMContentLoaded', function() {
    // 适配所有bt-slider滑块（价格、评分通用）
    document.querySelectorAll('.bt-slider').forEach(function(sliderEl) {
        const sliderInstance = sliderEl.slider;
        const slideContainer = sliderEl.closest('.slide');
        const minText = slideContainer.querySelector('.slide-min-val');
        const maxText = slideContainer.querySelector('.slide-max-val');

        // 监听滑动事件，实时更新数值
        sliderInstance.on('slide', function(values) {
            minText.innerText = values[0];
            maxText.innerText = values[1];
        });

        // 若不需要实时更新，只想滑动停止后再修改，可将上面的事件替换为slideStop
        // sliderInstance.on('slideStop', function(values) {
        //     minText.innerText = values[0];
        //     maxText.innerText = values[1];
        // });
    });
});

jQuery版本（适配老项目）

$(function() {
    $('.bt-slider').on('slide', function(e) {
        const $wrap = $(this).closest('.slide');
        $wrap.find('.slide-min-val').text(e.value[0]);
        $wrap.find('.slide-max-val').text(e.value[1]);
    });
});

注意：如果你的滑块初始化逻辑晚于DOM加载完成事件，需将上述代码放在滑块初始化代码之后执行，避免找不到滑块实例。

内容的提问来源于stack exchange，提问作者Leon walker