Рубрика: JavaScript

Опубликовано

Кастомный ползунок для выбора цены на jQuery UI

$(function() {
    // Инициализация слайдера
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [0, 500],
        slide: function(event, ui) {
            updatePriceInputs(ui.values[0], ui.values[1]);
        },
        change: function(event, ui) {
            updatePriceInputs(ui.values[0], ui.values[1]);
        }
    });

    // Функция для обновления полей ввода
    function updatePriceInputs(minVal, maxVal) {
        $(".input_price_min").val(minVal).trigger('change');
        $(".input_price_max").val(maxVal).trigger('change');
    }

    // Обработчики для ручного ввода значений
    $(".input_price_min").on('input', function() {
        var currentValues = $("#slider-range").slider("values");
        var newMin = Math.min($(this).val(), currentValues[1]);
        $("#slider-range").slider("values", 0, newMin);
    });

    $(".input_price_max").on('input', function() {
        var currentValues = $("#slider-range").slider("values");
        var newMax = Math.max($(this).val(), currentValues[0]);
        $("#slider-range").slider("values", 1, newMax);
    });

    // Инициализация начальных значений
    updatePriceInputs(
        $("#slider-range").slider("values", 0),
        $("#slider-range").slider("values", 1)
    );
});

 

Опубликовано

Яндекс.Карта через API со стандартными иконками

<script>
    initMap();

    async function initMap() {

        await ymaps3.ready;

        ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
            '@yandex/ymaps3-default-ui-theme@latest'
        ]);

        const {
            YMap,
            YMapDefaultSchemeLayer,
            YMapDefaultFeaturesLayer,
        } = ymaps3;

        // Иницилиазируем карту
        const map = new YMap(
            // Передаём ссылку на HTMLElement контейнера
            document.getElementById('map'),

            // Передаём параметры инициализации карты
            {
                location: {
                    // Координаты центра карты
                    center: [<?php normalizeMapPoint(get_field('map_center', 'option')); ?>],
                    // Уровень масштабирования
                    zoom: <?php the_field('map_zoom', 'option'); ?>
                }
            }
        );

        map.addChild(new YMapDefaultSchemeLayer());
        map.addChild(new YMapDefaultFeaturesLayer());

        const {
            YMapDefaultMarker
        } = await ymaps3.import('@yandex/ymaps3-default-ui-theme');

        // Добавляем слой для отображения схематической карты


        <?php while (have_rows('map', 'option')):
            the_row(); ?>
            map.addChild(new YMapDefaultMarker({
                coordinates: [<?php normalizeMapPoint(get_sub_field('koordinaty', 'option')); ?>],
                title: '<?php translateSubAcf('title', 'title_en', false); ?>',
                subtitle: '<?php translateSubAcf('text', 'text_en', false); ?>',
                color: ['#173F35'],
                draggable: false
            }));
        <?php endwhile; ?>


    }
</script>