Update app.py

app.py

@@ -461,121 +461,6 @@ div[data-testid="stVerticalBlock"] > div[data-testid="stHorizontalBlock"] > div
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* سایه بیشتر */
 }
 
-/* ======== استایل‌های سفارشی اسلایدر ======== */
-
-/* استایل اسلایدر */
-.stSlider > div > div > div > div {
-    background: linear-gradient(90deg, #E6E6FA, #6A0DAD) !important;
-    height: 10px !important;
-}
-
-/* نقاط اسلایدر */
-.stSlider > div > div > div > div > div > div {
-    width: 18px !important;
-    height: 18px !important;
-    border-radius: 50% !important;
-    background-color: #6A0DAD !important;
-    border: 3px solid white !important;
-    box-shadow: 0 0 5px rgba(0,0,0,0.3) !important;
-}
-
-/* متن دو طرف */
-.slider-labels {
-    display: flex;
-    justify-content: space-between;
-    margin: 5px 0 15px 0;
-    font-family: 'B Nazanin' !important;
-    font-size: 14px !important;
-    color: #6A0DAD;
-}
-
-/* نقاط روی اسلایدر */
-div[data-testid="stVerticalBlock"] div[data-testid="stSlider"] div[data-testid="stThumbValue"] {
-    visibility: visible !important;
-}
-
-/* دسته اسلایدر */
-div[data-testid="stVerticalBlock"] div[data-testid="stSlider"] div[role="slider"] {
-    background-color: #6a0dad !important;
-    z-index: 1;
-}
-
-/* خط زمینه اسلایدر */
-div[data-testid="stVerticalBlock"] div[data-testid="stSlider"] div[role="slider"]::before {
-    content: "";
-    display: block;
-    position: absolute;
-    background-color: #e6e6fa;
-    height: 6px;
-    width: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: 3px;
-    z-index: 0;
-}
-
-/* نقاط گسسته برای اسلایدر 5 نقطه‌ای */
-div[data-testid="stVerticalBlock"] div[data-testid="stSlider"][data-discrete="five-point"] div[role="slider"]::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: repeating-linear-gradient(
-        to right,
-        transparent,
-        transparent calc(25% - 1px),
-        #6a0dad calc(25%),
-        #6a0dad calc(25% + 1px),
-        transparent calc(25% + 1px),
-        transparent calc(50% - 1px),
-        #6a0dad calc(50%),
-        #6a0dad calc(50% + 1px),
-        transparent calc(50% + 1px),
-        transparent calc(75% - 1px),
-        #6a0dad calc(75%),
-        #6a0dad calc(75% + 1px)
-    );
-    pointer-events: none;
-    z-index: 0;
-}
-
-/* نقاط گسسته برای اسلایدر 7 نقطه‌ای */
-div[data-testid="stVerticalBlock"] div[data-testid="stSlider"][data-discrete="seven-point"] div[role="slider"]::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: repeating-linear-gradient(
-        to right,
-        transparent,
-        transparent calc(16.66% - 1px),
-        #6a0dad calc(16.66%),
-        #6a0dad calc(16.66% + 1px),
-        transparent calc(16.66% + 1px),
-        transparent calc(33.33% - 1px),
-        #6a0dad calc(33.33%),
-        #6a0dad calc(33.33% + 1px),
-        transparent calc(33.33% + 1px),
-        transparent calc(50% - 1px),
-        #6a0dad calc(50%),
-        #6a0dad calc(50% + 1px),
-        transparent calc(50% + 1px),
-        transparent calc(66.66% - 1px),
-        #6a0dad calc(66.66%),
-        #6a0dad calc(66.66% + 1px),
-        transparent calc(66.66% + 1px),
-        transparent calc(83.33% - 1px),
-        #6a0dad calc(83.33%),
-        #6a0dad calc(83.33% + 1px)
-    );
-    pointer-events: none;
-    z-index: 0;
-}
-
 /* استایل تضمینی برای رادیو باتن‌ها - نسخه نهایی */
 .stRadio > div > div > div > div > div > label,
 .stRadio > div > div > div > div > label,
@@ -787,6 +672,35 @@ h3 {
 </style>
 """, unsafe_allow_html=True)
 
+components.html("""
+<script>
+function styleSliders() {
+    // اضافه کردن نقاط به اسلایدرها
+    const sliders = document.querySelectorAll('[data-testid="stSlider"] > div:first-child');
+    sliders.forEach(slider => {
+        const max = parseInt(slider.getAttribute('aria-valuemax'));
+        const min = parseInt(slider.getAttribute('aria-valuemin'));
+        const steps = max - min;
+        
+        // ایجاد نقاط
+        slider.style.background = `repeating-linear-gradient(
+            to right,
+            #6a0dad,
+            #6a0dad 2px,
+            transparent 2px,
+            transparent calc(100%/${steps} - 1px),
+            #6a0dad calc(100%/${steps}),
+            #6a0dad calc(100%/${steps} + 1px)
+        )`;
+    });
+}
+
+// اجرای تابع پس از بارگذاری صفحه
+document.addEventListener('DOMContentLoaded', styleSliders);
+window.addEventListener('load', styleSliders);
+</script>
+""")
+
 # ========== توابع اصلی ==========
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""