{"id":22730,"date":"2026-01-15T10:31:48","date_gmt":"2026-01-15T10:31:48","guid":{"rendered":"https:\/\/creativa.gr\/?page_id=22730"},"modified":"2026-01-16T09:55:10","modified_gmt":"2026-01-16T09:55:10","slug":"test","status":"publish","type":"page","link":"https:\/\/creativa.gr\/el\/test\/","title":{"rendered":"test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22730\" class=\"elementor elementor-22730\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb9f192 e-flex e-con-boxed wcf-starter-animations-none e-con e-parent\" data-id=\"eb9f192\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;wcf_enable_cursor_hover_effect_text&quot;:&quot;View&quot;,&quot;wcf-animation&quot;:&quot;none&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-edb7465 e-flex e-con-boxed wcf-starter-animations-none e-con e-parent\" data-id=\"edb7465\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;wcf_enable_cursor_hover_effect_text&quot;:&quot;View&quot;,&quot;wcf-animation&quot;:&quot;none&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1ef498 elementor-widget elementor-widget-html\" data-id=\"d1ef498\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;wcf-animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* \u03a0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03c4\u03bf\u03c5 container \u03b3\u03b9\u03b1 \u03c4\u03bf field 45 *\/\r\n#field_1_45 {\r\n    overflow: visible !important;\r\n    padding-top: 10px !important;\r\n    max-width: 100%;\r\n}\r\n#field_1_45 .ginput_container_number {\r\n    width: 100% !important;\r\n    padding: 0 !important;\r\n    box-sizing: border-box;\r\n    position: relative !important;\r\n}\r\n\r\n\/* Container \u03b3\u03b9\u03b1 slider *\/\r\n.slider-wrapper-45 {\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n    margin-top: 30px;\r\n}\r\n\r\n\/* \u0397 \u03bc\u03c0\u03ac\u03c1\u03b1 \u03c4\u03bf\u03c5 Slider - 90% width *\/\r\n#range-slider-45 {\r\n    -webkit-appearance: none;\r\n    width: 80% !important;\r\n    height: 10px;\r\n    border-radius: 5px;\r\n    border: 2px solid #cccccc;\r\n    outline: none;\r\n    margin: 10px 0 !important;\r\n    cursor: pointer;\r\n    border: none !important;\r\n    display: block;\r\n    transition: background 0.2s ease; \/* smooth \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03b9\u03c3\u03bc\u03cc\u03c2 *\/\r\n}\r\n\r\n\/* \u03a4\u03bf Tooltip (\u03a6\u03bf\u03cd\u03c3\u03ba\u03b1) *\/\r\n#slider-tooltip-45 {\r\n    position: absolute;\r\n    background: #0778E3;\r\n    color: #fff;\r\n    padding: 4px 12px;\r\n    border-radius: 6px;\r\n    font-size: 14px;\r\n    font-weight: bold;\r\n    top: -25px; \/* \u03bb\u03b9\u03b3\u03cc\u03c4\u03b5\u03c1\u03bf \u03ba\u03b5\u03bd\u03cc *\/\r\n    pointer-events: none;\r\n    white-space: nowrap;\r\n    z-index: 10;\r\n    transition: left 0.2s ease, transform 0.2s ease; \/* smooth movement *\/\r\n}\r\n\r\n\/* \u03a4\u03bf \u03b2\u03b5\u03bb\u03ac\u03ba\u03b9 \u03c4\u03b7\u03c2 \u03c6\u03bf\u03cd\u03c3\u03ba\u03b1\u03c2 *\/\r\n#slider-tooltip-45::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: -5px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    border-width: 5px 5px 0;\r\n    border-style: solid;\r\n    border-color: #0778E3 transparent transparent;\r\n}\r\n\r\n\/* \u03a4\u03bf \u03ba\u03bf\u03c5\u03bc\u03c0\u03af (Thumb) *\/\r\n#range-slider-45::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 22px;\r\n    height: 22px;\r\n    background: #0778E3;\r\n    border: 3px solid #ffffff;\r\n    border-radius: 50%;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n    cursor: grab;\r\n}\r\n\r\n#range-slider-45::-moz-range-thumb {\r\n    width: 22px;\r\n    height: 22px;\r\n    background: #0778E3;\r\n    border: 3px solid #ffffff;\r\n    border-radius: 50%;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* \u03a4\u03bf number input *\/\r\n#input_1_45 {\r\n    width: 100% !important;\r\n    max-width: 100px;\r\n    margin: 15px auto 0 !important;\r\n    display: block !important;\r\n    text-align: center;\r\n    font-size: 16px;\r\n    padding: 8px !important;\r\n    border: 2px solid #0778E3 !important;\r\n    border-radius: 5px !important;\r\n}\r\n\r\n#input_1_45:focus {\r\n    outline: none !important;\r\n    border-color: #0778E3 !important;\r\n    box-shadow: 0 0 0 3px rgba(7, 120, 227, 0.1) !important;\r\n}\r\n\r\n\/* \u039a\u03c1\u03cd\u03b2\u03b5\u03b9 \u03c4\u03bf instruction text *\/\r\n#field_1_45 .gfield_description {\r\n    display: none !important;\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const input = document.getElementById('input_1_45');\r\n    if (!input) return;\r\n    \r\n    \/\/ \u0394\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03af\u03b1 \u03c4\u03bf\u03c5 range slider\r\n    const sliderWrapper = document.createElement('div');\r\n    sliderWrapper.className = 'slider-wrapper-45';\r\n    \r\n    const rangeSlider = document.createElement('input');\r\n    rangeSlider.type = 'range';\r\n    rangeSlider.id = 'range-slider-45';\r\n    rangeSlider.min = '1';\r\n    rangeSlider.max = '1500';\r\n    rangeSlider.step = '1';\r\n    rangeSlider.value = input.value || '1';\r\n    \r\n    const tooltip = document.createElement('div');\r\n    tooltip.id = 'slider-tooltip-45';\r\n    \r\n    sliderWrapper.appendChild(rangeSlider);\r\n    sliderWrapper.appendChild(tooltip);\r\n    \r\n    \/\/ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u03c4\u03bf\u03c5 slider \u03c0\u03c1\u03b9\u03bd \u03c4\u03bf input\r\n    input.parentNode.insertBefore(sliderWrapper, input);\r\n    \r\n    \/\/ \u039f\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 default \u03c4\u03b9\u03bc\u03ae\u03c2\r\n    if (!input.value) {\r\n        input.value = '1';\r\n    }\r\n    \r\n    \/\/ function updateSlider() {\r\n    \/\/     const val = parseInt(rangeSlider.value);\r\n    \/\/     const min = parseInt(rangeSlider.min);\r\n    \/\/     const max = parseInt(rangeSlider.max);\r\n        \r\n    \/\/     const percent = (val - min) \/ (max - min);\r\n        \r\n    \/\/     \/\/ \u0398\u03ad\u03c3\u03b7 tooltip\r\n    \/\/     const sliderRect = rangeSlider.getBoundingClientRect();\r\n    \/\/     const sliderWidth = sliderRect.width;\r\n    \/\/     const thumbWidth = 22;\r\n    \/\/     const availableWidth = sliderWidth - thumbWidth;\r\n    \/\/     const leftPosition = percent * availableWidth + thumbWidth \/ 2;\r\n    \/\/     const wrapperRect = sliderWrapper.getBoundingClientRect();\r\n    \/\/     const absoluteLeft = sliderRect.left - wrapperRect.left + leftPosition;\r\n    \/\/     tooltip.innerHTML = val;\r\n    \/\/     tooltip.style.left = absoluteLeft + 'px';\r\n    \/\/     tooltip.style.transform = 'translateX(-50%)';\r\n        \r\n    \/\/     \/\/ Background \u03bc\u03c0\u03ac\u03c1\u03b1\u03c2 \u03c3\u03c5\u03b3\u03c7\u03c1\u03bf\u03bd\u03b9\u03c3\u03bc\u03ad\u03bd\u03bf \u03bc\u03b5 thumb\r\n    \/\/     const fillPercent = percent * 100;\r\n    \/\/     rangeSlider.style.background = `linear-gradient(to right, #0778E3 0%, #0778E3 ${fillPercent}%, #eeeeee ${fillPercent}%, #eeeeee 100%)`;\r\n        \r\n    \/\/     \/\/ \u0395\u03bd\u03b7\u03bc\u03ad\u03c1\u03c9\u03c3\u03b7 input\r\n    \/\/     input.value = val;\r\n        \r\n    \/\/     if (typeof jQuery !== 'undefined') {\r\n    \/\/         jQuery(input).trigger('change');\r\n    \/\/     }\r\n    \/\/ }\r\n    function updateSlider() {\r\n    const val = parseInt(rangeSlider.value);\r\n    const min = parseInt(rangeSlider.min);\r\n    const max = parseInt(rangeSlider.max);\r\n\r\n    const percent = ((val - min) \/ (max - min)) * 100;\r\n\r\n    \/\/ Tooltip\r\n    tooltip.innerHTML = val;\r\n    tooltip.style.left = percent + '%';\r\n    tooltip.style.transform = 'translateX(-50%)';\r\n\r\n    \/\/ Gradient \u03a0\u039b\u0397\u03a1\u03a9\u03a3 \u03c3\u03c5\u03b3\u03c7\u03c1\u03bf\u03bd\u03b9\u03c3\u03bc\u03ad\u03bd\u03bf\r\n    rangeSlider.style.background = `\r\n        linear-gradient(\r\n            to right,\r\n            #0778E3 0%,\r\n            #0778E3 ${percent}%,\r\n            #eeeeee ${percent}%,\r\n            #eeeeee 100%\r\n        )\r\n    `;\r\n\r\n    \/\/ Sync input\r\n    input.value = val;\r\n\r\n    if (typeof jQuery !== 'undefined') {\r\n        jQuery(input).trigger('change');\r\n    }\r\n}\r\n\r\n    \r\n    function updateFromInput() {\r\n        let val = parseInt(input.value);\r\n        if (isNaN(val) || val < 1) val = 1;\r\n        if (val > 1500) val = 1500;\r\n        input.value = val;\r\n        rangeSlider.value = val;\r\n        updateSlider();\r\n    }\r\n    \r\n    \/\/ Events\r\n    rangeSlider.addEventListener('input', updateSlider);\r\n    input.addEventListener('input', updateFromInput);\r\n    input.addEventListener('change', updateFromInput);\r\n    \r\n    window.addEventListener('resize', updateSlider);\r\n    \r\n    \/\/ \u0391\u03c1\u03c7\u03b9\u03ba\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\r\n    updateSlider();\r\n    setTimeout(updateSlider, 100);\r\n    setTimeout(updateSlider, 300);\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-22730","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/pages\/22730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/comments?post=22730"}],"version-history":[{"count":10,"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/pages\/22730\/revisions"}],"predecessor-version":[{"id":22861,"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/pages\/22730\/revisions\/22861"}],"wp:attachment":[{"href":"https:\/\/creativa.gr\/el\/wp-json\/wp\/v2\/media?parent=22730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}