Update app.py

app.py

@@ -734,118 +734,57 @@ h3 {
     margin-bottom: 1em !important;
     line-height: 1.8 !important;
 }
-/* استایل برای اسلایدر استاندارد Streamlit */
-.stSlider [role="slider"] {
-    background-color: #f0e6ff !important; /* رنگ پس‌زمینه مسیر */
-    height: 10px !important;
-    border-radius: 5px !important;
-}
-
-.stSlider [role="slider"]::-webkit-slider-thumb {
-    background-color: #6a0dad !important; /* رنگ دستگیره */
-    border: 2px solid #ffffff !important;
-    width: 20px !important;
-    height: 20px !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
-}
-
-.stSlider [role="slider"]::-moz-range-thumb {
-    background-color: #6a0dad !important;
-    border: 2px solid #ffffff !important;
-    width: 20px !important;
-    height: 20px !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
-}
-
-.stSlider [role="slider"]::-webkit-slider-runnable-track {
-    background-color: #f0e6ff !important;
-    height: 10px !important;
-    border-radius: 5px !important;
-}
-
-.stSlider [role="slider"]::-moz-range-track {
-    background-color: #f0e6ff !important;
-    height: 10px !important;
-    border-radius: 5px !important;
-}
-
-/* استایل برای لیبل‌های اسلایدر */
-.slider-labels {
-    display: flex !important;
-    justify-content: space-between !important;
-    font-size: 12px !important;
-    margin-bottom: 5px !important;
-    color: #333333 !important;
-    font-family: 'B Nazanin' !important;
-}
-
-/* استایل برای متن پاسخ انتخاب‌شده */
-.slider-response {
-    text-align: center !important;
-    color: #6a0dad !important;
-    font-weight: bold !important;
-    margin-top: 10px !important;
-    font-family: 'B Nazanin' !important;
-}
 </style>
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
 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)
-
-    # لیبل‌های دو طرف
-    st.markdown(
-        f"""
-        <div class="slider-labels">
+    default_value = st.session_state.get(key, (points + 1) // 2)
+    
+    # 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>
-        """,
-        unsafe_allow_html=True
-    )
-
-    # اسلایدر استاندارد Streamlit
-    value = st.slider(
-        "",
-        min_value=1,
-        max_value=points,
-        value=st.session_state.get(key, default_value),
-        step=1,
-        key=key,
-        format="%d"
-    )
-
-    # نمایش پاسخ انتخاب‌شده
-    st.markdown(
-        f"""
-        <p class="slider-response">
-            پاسخ انتخاب‌شده: {value}
-        </p>
-        """,
-        unsafe_allow_html=True
-    )
+        <input type="range" id="{key}" min="1" max="{points}" step="1" value="{default_value}"
+               style="width: 100%; height: 10px; accent-color: #6a0dad; margin-bottom: 15px;"
+               oninput="updateSlider('{key}')">
+        <div style="text-align: center; margin-top: 10px; direction: rtl;">
+            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{default_value}</span></strong>
+        </div>
+    </div>
 
-    # دیباگ
-    st.write(f"Debug: مقدار ذخیره‌شده برای {key}: {value}")
+    <script>
+    function updateSlider(key) {{
+        const value = parseInt(document.getElementById(key).value);
+        document.getElementById('output_' + key).innerText = value;
+
+        // ارسال مقدار به Streamlit
+        window.parent.postMessage({{
+            type: 'streamlit:setComponentValue',
+            key: key,
+            value: value
+        }}, '*');
+    }}
+    </script>
+    """
+    
+    # نمایش کامپوننت
+    components.html(html, height=150)
+    
+    # مقدار نهایی
+    return st.session_state.get(key, default_value)
     
-    # ذخی��ه مقدار
-    st.session_state[key] = value
-    return value
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران