Update app.py

app.py

@@ -739,46 +739,74 @@ h3 {
 
 # ========== توابع اصلی ==========
 def custom_likert_slider(question_data):
-    """نمایش سوال لیکرت با اسلایدر استاندارد Streamlit"""
+    """نمایش سوال لیکرت با اسلایدر سفارشی و دیباگ کامل"""
     question = question_data["question"]
     key = question_data["key"]
     points = question_data["scale"]
     labels = question_data.get("labels", ["کمترین", "بیشترین"])  # لیبل‌های پیش‌فرض
-
+    
     # مقدار پیش‌فرض (وسط طیف)
     default_value = (points + 1) // 2
-
-    # نمایش سوال
-    st.markdown(f"<p style='font-size:16px; margin-bottom:5px;'>{question}</p>", unsafe_allow_html=True)
-
-    # اسلایدر استاندارد Streamlit
-    value = st.slider(
-        "",
-        min_value=1,
-        max_value=points,
-        value=default_value,
-        step=1,
-        key=key,
-        format="%d"
-    )
-
-    # نمایش لیبل‌های دو طرف
-    st.markdown(
-        f"""
-        <div style='display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;'>
+    
+    # مقدار فعلی از session_state
+    current_value = st.session_state.get(key, default_value)
+    
+    # HTML و JavaScript برای اسلایدر
+    html = f"""
+    <div id="container_{key}" style="direction: ltr; font-family: 'B Nazanin'; margin-bottom: 30px;">
+        <label style="font-size: 16px; font-weight: bold; display: block; text-align: right;">{question}</label>
+        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
             <span>{labels[0]}</span>
             <span>{labels[1]}</span>
         </div>
-        <p style='text-align:center; color:#6a0dad; font-weight:bold;'>
-            پاسخ انتخاب‌شده: {value}
-        </p>
-        """,
-        unsafe_allow_html=True
-    )
+        <input type="range" id="{key}" min="1" max="{points}" step="1" value="{current_value}"
+               style="width: 100%; height: 10px; accent-color: #6a0dad; margin-bottom: 15px;"
+               oninput="updateSlider('{key}')" onchange="updateSlider('{key}')">
+        <div style="text-align: center; margin-top: 10px; direction: rtl;">
+            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{current_value}</span></strong>
+        </div>
+    </div>
 
-    # ذخیره مقدار در session_state
-    st.session_state[key] = value
-    return value
+    <script>
+    function updateSlider(key) {{
+        const slider = document.getElementById(key);
+        const value = parseInt(slider.value);
+        document.getElementById('output_' + key).innerText = value;
+
+        // ارسال مقدار به Streamlit
+        const message = {{
+            type: 'streamlit:setComponentValue',
+            value: value,
+            key: key
+        }};
+        window.parent.postMessage(message, '*');
+        
+        // دیباگ: چاپ پیام ارسالی
+        console.log('Sending to Streamlit: ', JSON.stringify(message));
+    }}
+
+    // تنظیم مقدار اولیه
+    document.getElementById('{key}').value = {current_value};
+    document.getElementById('output_{key}').innerText = {current_value};
+    </script>
+    """
+    
+    # نمایش کامپوننت با کلید منحصربه‌فرد
+    components.html(html, height=150, key=f"slider_{key}")
+    
+    # دریافت مقدار از Streamlit
+    component_value = st.session_state.get(key, default_value)
+    
+    # دیباگ: نمایش مقادیر
+    st.write(f"Debug: کلید: {key}")
+    st.write(f"Debug: مقدار پیش‌فرض: {default_value}")
+    st.write(f"Debug: مقدار دریافت‌شده: {component_value}")
+    st.write(f"Debug: مقدار در session_state[{key}]: {st.session_state.get(key, 'هیچ')}")
+    
+    # ذخیره مقدار
+    st.session_state[key] = component_value
+    
+    return component_value
     
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""