Shiny for Python में हर स्लाइडर को अलग रंग कैसे दें

Shiny for Python में स्लाइडर को अलग रंग देने का व्यावहारिक तरीका: Tag.add_class से यूनिक क्लास जोड़ें और scoped CSS से बबल, ट्रैक, हैंडल को स्टाइल करें.

Shiny for Python ऐप में अलग-अलग स्लाइडर को अलग रंग देना सुनने में आसान है, लेकिन किसी एक कंट्रोल को बाकी से बिना असर डाले टार्गेट करना उतना सीधा नहीं है। चेकबॉक्स और रेडियो बटन पर कस्टम CSS अक्सर ठीक चलती है, मगर स्लाइडर का DOM ढांचा खास होता है, जिसे सटीक सेलेक्टर्स चाहिए। नीचे बिना किसी हैक के हर स्लाइडर को स्वतंत्र रूप से स्टाइल करने का संक्षिप्त तरीका दिया गया है।

समस्या का सेटअप

एक जैसे डिफॉल्ट स्टाइल वाले तीन स्लाइडर बॉक्स से बाहर रंग के आधार पर अलग नहीं दिखते। लक्ष्य है—उन्हें अलग-अलग रंग देना।

from shiny import App, Inputs, Outputs, Session, ui
ui_shell = ui.page_fluid(
    ui.input_slider("r_id", "red", value=0, min=0, max=50),
    ui.input_slider("g_id", "green", value=0, min=0, max=50),
    ui.input_slider("b_id", "blue", value=0, min=0, max=50),
)
def logic(input: Inputs, output: Outputs, session: Session):
    pass
application = App(ui_shell, logic)

क्यों हर स्लाइडर का रंग अपने आप नहीं बदलता

आप कुछ CSS जोड़ भी दें, तो नियम आम तौर पर सभी स्लाइडर्स पर लागू हो जाते हैं, क्योंकि उनकी आंतरिक संरचना समान है। किसी एक कंट्रोल को बाकी से अलग रखते हुए स्टाइल करने के लिए, हर स्लाइडर के कंटेनर पर उसकी अपनी क्लास होनी चाहिए। फिर वही यूनिक क्लास स्कोप बन जाती है, और CSS सेलेक्टर्स स्लाइडर के भीतर के हिस्सों—मान बबल, ट्रैक (बार) और हैंडल—तक साफ़-साफ़ पहुँच सकते हैं।

समाधान

कुंजी है Tag.add_class() से हर स्लाइडर को एक अलग क्लास देना। इसके बाद स्कोप्ड CSS सेलेक्टर्स से अंदरूनी एलिमेंट्स को टार्गेट करें। नीचे एक काम करने वाला पैटर्न है—एक स्लाइडर को हरी थीम और दूसरे को लाल थीम देता है।

from shiny import App, Inputs, Outputs, Session, ui
page_body = ui.page_fluid(
    ui.input_slider("hue_red", "red", value=0, min=0, max=50).add_class("toneRed"),
    ui.input_slider("hue_green", "green", value=0, min=0, max=50).add_class("toneGreen"),
    ui.tags.style(
        """
        .toneGreen > .irs.irs--shiny .irs-single { /* मान बबल */
            background-color: #90EE90;
            color: black;
        }
        .toneGreen > * > .irs-bar.irs-bar--single { /* ट्रैक */
            background-color: #90EE90;
        }
        .toneGreen > * > .irs-handle.single { /* हैंडल */
            background-color: #90EE90;
        }
        .toneRed > .irs.irs--shiny .irs-single { /* मान बबल */
            background-color: #FF0000;
            color: black;
        }
        .toneRed > * > .irs-bar.irs-bar--single { /* ट्रैक */
            background-color: #FF0000;
        }
        .toneRed > * > .irs-handle.single { /* हैंडल */
            background-color: #FF0000;
        }
        """
    ),
)
def backend(input: Inputs, output: Outputs, session: Session):
    pass
shiny_app = App(page_body, backend)

अंदर क्या हो रहा है

Tag.add_class() स्लाइडर के रैपर पर एक पहचानने योग्य क्लास जोड़ता है। CSS उसी रैपर को स्कोप मानकर मौजूदा स्लाइडर मार्कअप तक पहुँचती है: मान बबल, मुख्य बार और हैंडल को क्रमशः .irs.irs--shiny .irs-single, .irs-bar.irs-bar--single और .irs-handle.single से टार्गेट किया जाता है। हर नियम की शुरुआत यूनिक रैपर क्लास से होने के कारण स्टाइल केवल उसी स्लाइडर पर लागू होती है जिसके लिए लिखी गई है।

यह क्यों महत्वपूर्ण है

जब हर कंट्रोल के लिए अलग थीम चाहिए, तो ग्लोबल CSS पर्याप्त नहीं रहती। समर्पित क्लास के साथ स्टाइल्स को स्कोप करने से अनचाहे ओवरराइड रुकते हैं, कंपोनेंट्स दृश्य रूप से सुसंगत रहते हैं, और ऐसे नाज़ुक सेलेक्टर्स से बचाव होता है जो सब कुछ एक साथ टार्गेट कर लें। रखरखाव भी आसान होता है: नया रंग जोड़ना बस एक क्लास और कुछ नियमों का काम रह जाता है, अपवादों की लंबी सूची नहीं।

मुख्य बातें

हर स्लाइडर को Tag.add_class() से उसकी अपनी क्लास दें, फिर उसी क्लास के स्कोप में स्लाइडर के अंदरूनी एलिमेंट्स को CSS से टार्गेट करें। यह पैटर्न भरोसेमंद, दोहराने योग्य है और डिज़ाइन बदलावों को स्थानीय रखता है। बाद में और स्लाइडर या थीम जोड़नी हों, तो इसी ढांचे को बढ़ाएँ—बाकी UI को छुए बिना।