관리-도구

편집 파일: 4cccf4b75709468712e7a19a6c250c14.php

<div id="price_range_slider" class="my-3 rounded-10"
             data-max-value="<?php echo e(getProductMaxUnitPriceRange(type: 'web')); ?>" data-min-value="0"
        >
            <div class="slider-range"></div>
            <div class="slider-thumb" id="thumb_min"></div>
            <div class="slider-thumb" id="thumb_max"></div>
        </div>
    </div>
</div>

<?php $__env->startPush('script'); ?>
    <script>
        $(function () {
            let slider = $("#price_range_slider");
            let minThumb = $("#thumb_min");
            let maxThumb = $("#thumb_max");
            let range = $(".slider-range");
            let minInput = $("#min_price");
            let maxInput = $("#max_price");

let sliderMin = slider?.data('min-value') ?? 0;
            let sliderMax = slider?.data('max-value') ?? 100000000;

let minValue = sliderMin;
            let maxValue = sliderMax;

let isRtl = $('html').attr('dir') === 'rtl';

function updateSlider() {
                let sliderWidth = slider.width();

let minLeft = (((minValue - sliderMin) / (sliderMax - sliderMin)) * sliderWidth);
                let maxLeft = ((maxValue - sliderMin) / (sliderMax - sliderMin)) * sliderWidth;

if (isRtl) {
                    minLeft = sliderWidth - minLeft;
                    maxLeft = sliderWidth - maxLeft;
                }

minThumb.css(isRtl ? "insetInlineEnd" : "insetInlineStart", minLeft + "px");
                maxThumb.css(isRtl ? "insetInlineEnd" : "insetInlineStart", maxLeft + "px");

range.css({
                    [isRtl ? 'insetInlineEnd' : 'insetInlineStart']: Math.min(minLeft, maxLeft) + "px",
                    width: Math.abs(maxLeft - minLeft) + "px",
                });

minInput.val(minValue !== null ? minValue : minInput.attr('placeholder'));
                maxInput.val(maxValue !== null ? maxValue : maxInput.attr('placeholder'));

let distance = maxValue - minValue;
                $('#slider_distance').text("$" + distance.toLocaleString());
            }

function clamp(value, min, max) {
                return Math.min(Math.max(value, min), max);
            }

function handleDrag(thumb, isMinThumb) {
                function startDrag(startX, startValue) {
                    let sliderWidth = slider.width();

function moveHandler(e) {
                        let pageX = e.pageX || (e.originalEvent.touches && e.originalEvent.touches[0].pageX);
                        if (!pageX) return;

let deltaX = isRtl ? (startX - pageX) : (pageX - startX);
                        let valueChange = (deltaX / sliderWidth) * (sliderMax - sliderMin);
                        let newValue = clamp(startValue + valueChange, sliderMin, sliderMax);

newValue = Math.round(newValue);

if (isMinThumb) {
                            minValue = Math.min(newValue, maxValue || sliderMax);
                        } else {
                            maxValue = Math.max(newValue, minValue || sliderMin);
                        }

updateSlider();
                    }

function stopHandler() {
                        $(document).off(".slider");
                    }

$(document).on("mousemove.slider touchmove.slider", moveHandler);
                    $(document).on("mouseup.slider touchend.slider touchcancel.slider", stopHandler);
                }

thumb.on("mousedown touchstart", function (e) {
                    e.preventDefault();
                    let pageX = e.pageX || (e.originalEvent.touches && e.originalEvent.touches[0].pageX);
                    if (!pageX) return;

console.log("drag start", this.id, pageX);

let startValue = isMinThumb ? minValue : maxValue;
                    startDrag(pageX, startValue);
                });
            }

minInput.on("input", function () {
                let inputValue = parseInt($(this).val(), 10);
                if (!isNaN(inputValue)) {
                    minValue = clamp(inputValue, sliderMin, maxValue || sliderMax);
                } else {
                    minValue = null;
                }
                updateSlider();
            });

maxInput.on("input", function () {
                let inputValue = parseInt($(this).val(), 10);
                if (!isNaN(inputValue)) {
                    maxValue = clamp(inputValue, minValue || sliderMin, sliderMax);
                } else {
                    maxValue = null;
                }
                updateSlider();
            });

handleDrag(minThumb, true);
            handleDrag(maxThumb, false);

updateSlider();

$(window).on("resize", function () {
                updateSlider();
            });
        });
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home2/slnssare/public_html/resources/themes/default/web-views/products/partials/_filter-product-price.blade.php ENDPATH**/ ?>

관리-도구

편집 파일: 4cccf4b75709468712e7a19a6c250c14.php

🔐 System Login