I have a slider and I want my JS to be updated and the slider to be updated when editing in the Customizer.Why does the code now, when updating {{ section.settings.change_slides_speed }} always display the default value 5 to the console, and only if I save it will display a different value to the console. Also does not update true/false values. How can I solve this problem <script> document.addEventListener('DOMContentLoaded', () => { const initAnnouncementSlider = () => { console.log({{ section.settings.change_slides_speed | json }}); const announcementBarSlider = document.querySelector(".announcement-bar__slider"); if (announcementBarSlider) { new Splide(announcementBarSlider, { arrows: false, pagination: false, type: 'loop', autoplay: {{ section.settings.auto_rotate }}, interval: {{ section.settings.change_slides_speed }}000, speed: 800, perPage: 1, perMove: 1, }).mount(); } }; initAnnouncementSlider(); if (Shopify.designMode) { document.addEventListener('shopify:section:load', initAnnouncementSlider); document.addEventListener('shopify:section:reorder', initAnnouncementSlider); } }); </script> {% schema %} { "name": "t:sections.announcement-bar.name", "max_blocks": 12, "class": "announcement-bar-section", "enabled_on": { "groups": ["header"] }, "settings": [ { "type": "checkbox", "id": "auto_rotate", "label": "t:sections.announcement-bar.settings.auto_rotate.label", "default": false }, { "type": "range", "id": "change_slides_speed", "min": 3, "max": 10, "step": 1, "unit": "s", "label": "t:sections.announcement-bar.settings.change_slides_speed.label", "default": 5 }, ], "blocks": [ { "type": "announcement", "name": "t:sections.announcement-bar.blocks.announcement.name", "settings": [ { "type": "text", "id": "text", "default": "Welcome to our store", "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label" }, { "type": "url", "id": "link", "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label" } ] } ], "presets": [ { "name": "t:sections.announcement-bar.presets.name", "blocks": [ { "type": "announcement" } ] } ] } {% endschema %} Run code snippetExpand snippet