मूल्य सेट करण्यासाठी स्लाइडरसाठी एचटीएमएल कोड. स्टाइलिंग आणि स्क्रिप्टिंग स्लाइडर

मी सध्या माझ्या पहिल्या सशुल्क प्रकल्पावर काम करत आहे. इतर गोष्टींबरोबरच, या प्रकल्पासाठी मला स्लाईडर्ससाठी स्क्रिप्ट स्टाईल आणि लिहिण्याची आवश्यकता आहे. काही मनोरंजक मुद्दे मी तुमच्या लक्षात आणून देऊ इच्छितो, जसे की IE, Android WebKit मधील डिस्प्ले समस्या आणि इनपुटचा योग्य वापर आणि इव्हेंट बदलणे. आणि वाक्यरचनाचे संक्षिप्त विहंगावलोकन देखील.

हे माझे उदाहरण आहे. या विशिष्ट प्रकरणात, डच वापरकर्त्यांना 100 दशलक्ष युरो बजेट निधी अनेक विभागांमध्ये विभाजित करण्यासाठी स्लाइडर वापरण्यास सांगितले जाते. या प्रकरणात, सर्व स्लाइडरचे एकूण मूल्य 100 (दशलक्ष) पेक्षा जास्त नसावे, ज्यासाठी एक लहान स्क्रिप्ट लिहिणे आवश्यक आहे.

स्लाइडर, ट्रॅक आणि स्लाइडर

येथे स्लाइडर आहे. तांत्रिकदृष्ट्या ते म्हणून ओळखले जाते, आणि ते IE9 आणि खाली समर्थित नाही.

हा HTML कोड आहे:

स्लाइडरमध्ये एक मार्ग असतो ज्याच्या बाजूने वापरकर्ता स्लाइडरला ड्रॅग करतो. तुम्ही ट्रॅक आणि स्लाइडरवर शैली लागू करू शकता, परंतु स्क्रिप्टवर नाही.

शैली मूलभूत

स्लाइडरची शैली करणे इतके अवघड नाही. स्लायडर आणि ट्रॅकची शैली केली जाऊ शकते, जरी आवश्यक छद्म-घटक ब्राउझरनुसार बदलतात:

स्लाइडरसाठी -webkit-slider-thumb , -moz-range-thumb किंवा -ms-thumb वापरा.

-webkit-slider-runnable-track , -moz-range-track किंवा -ms-track वापरून ट्रॅक "ॲक्सेस" केला जाऊ शकतो.

सर्व ब्राउझरसाठी समान शैली वापरणे अधिक योग्य असले तरीही (स्लायडरसाठी इंडेंटेशन वगळता) तुम्ही या निवडकांना एका नियमात एकत्र करू शकत नाही. जर ब्राउझरला एक निवडक सापडला जो तो ओळखत नाही, तर तो इतर सर्वांकडे दुर्लक्ष करतो. त्यामुळे तुम्हाला सर्व्हरच्या बाजूने सीएसएस जनरेटर पुनरावृत्ती करावी लागेल किंवा वापरावी लागेल.

IE आणि MS Edge ला ट्रॅकवर पारदर्शक रंग आणि बॉर्डर-रंग आवश्यक आहे किंवा ते डीफॉल्ट ट्रॅक शैली प्रदर्शित करतील. त्यांना इतर ब्राउझरपेक्षा स्लाइडरसाठी भिन्न पॅडिंग देखील आवश्यक आहे.

माझ्या उदाहरणात, स्लाइडरची उंची अंदाजे 40 पिक्सेल आहे. हे दिसून आले की मुख्य स्लाइडर शैलींमध्ये ओव्हरफ्लो आहे: लपविलेले गुणधर्म सेट, जे एज आणि IE मध्ये बहुतेक स्लाइडर लपवतात. याचे निराकरण करण्यासाठी, मला स्लायडरची उंची स्पष्टपणे सेट करावी लागली.

IE मध्ये, परंतु एज नाही, स्लाइडर इंडेंट केलेला आहे. म्हणून पॅडिंग सेट करा: 0 आणि स्वतःची डोकेदुखी वाचवा.

मी अनेक वेळा वाचले आहे की MS Edge ने -webkit- गुणधर्मांना समर्थन दिले पाहिजे. परंतु व्यवहारात असे दिसून आले की एज आणि वेबकिट/ब्लिंक या दोन्हीसाठी शैलीच्या एका संचासह कार्य करणे अशक्य आहे. IE10 आणि IE11 साठी आवश्यक असल्यास मी स्वतंत्र -ms- शैली वापरण्याची शिफारस करतो. -webkit- नंतर -ms- शैली परिभाषित करणे सर्वोत्तम आहे: अशा प्रकारे -ms- शैली एजमध्ये अचूकपणे कार्यान्वित केल्या जातील.

वेबकिट आणि ब्लिंक इंजिन्सवर तयार केलेल्या ब्राउझरमध्ये, स्लायडर डिफॉल्ट बॉक्स-साइजिंगवर होतो: बॉर्डर-बॉक्स, इतर सर्व ब्राउझरमध्ये, या गुणधर्माचे मूल्य सामग्री-बॉक्स आहे. स्लाइडरसाठी बॉक्स-आकार स्पष्टपणे सेट करणे चांगले आहे.

वेबकिट आणि ब्लिंक देखील आवश्यक आहे -वेबकिट-दिसणे: काहीही नाही, परंतु एका अपवादासह. खाली पहा.

CSS टेम्पलेट

या सर्व किरकोळ समस्यांचा परिणाम खालील CSS टेम्पलेटमध्ये होतो:

इनपुट ( -वेबकिट-स्वरूप: काहीही नाही; उंची: 35px; /* तुमची उंची सेट करा */ पॅडिंग: 0; /* तुमच्या स्लाइडरची शैली */ ) इनपुट::-वेबकिट-स्लायडर-थंब ( -वेबकिट-स्वरूप: काहीही; बॉक्स -आकार: सामग्री-बॉक्स; /* आपल्या स्लाइडरची शैली */ ) इनपुट::-मोज-श्रेणी-थंब ( /* आपल्या स्लाइडरला पुन्हा शैली देते */ ) इनपुट::-ms-thumb ( /* -webkit- नंतर यावे */ /* तुमच्या स्लाइडरला पुन्हा शैली */ /* वेगळ्या पॅडिंगची आवश्यकता असू शकते */ ) इनपुट::-webkit-slider-runnable-track ( /* styles your track */ ) इनपुट::-moz-range-track ( / * तुमचा ट्रॅक पुन्हा स्टाईल करा */ ) इनपुट::-ms-ट्रॅक ( /* -webkit- */ बॉर्डर-रंग: पारदर्शक; रंग: पारदर्शक; /* तुमचा ट्रॅक पुन्हा शैली करा */ )

देखावा गुणधर्म आणि Android WebKit त्रुटी

वेबकिट आणि ब्लिंक आधारित ब्राउझरमधील आणखी एक कमतरता म्हणजे तुम्ही -वेबकिट-स्वरूप सेट करणे आवश्यक आहे: स्लाइडर आणि स्लाइडर दोन्हीवर कोणतीही मालमत्ता नाही (परंतु ट्रॅक नाही). हे वरील CSS टेम्प्लेटमध्ये दर्शविले आहे.

खरी समस्या अशी आहे की Android WebKit साठी तुम्ही ही घोषणा वापरू नये. तुम्ही -webkit-स्वरूप जोडल्यास: काहीही नाही , Android WebKit तुमच्या शैली योग्यरित्या प्रस्तुत करणार नाही. हा कोड काढून टाकल्याने बगचे निराकरण होते, परंतु नंतर स्लायडर शैली Safari, Chrome आणि इतर काही ब्राउझरमध्ये रेंडर होणार नाहीत. चला एकत्र या समस्येचे निराकरण करूया.

आम्ही -webkit-appearance सेट करतो: CSS मध्ये काहीही नाही, हा एकमेव उपाय आहे ज्याचे भविष्य आहे. अँड्रॉइड वेबकिटमध्ये आम्हाला स्लायडर-हॉरिझॉन्टल व्हॅल्यू बदलायची आहे. पण आपण Android WebKit मध्ये आहोत हे कसे कळेल?

ब्राउझर ओळख? आमच्या मंडळांमध्ये हे प्रथा नाही - जे सर्वोत्तम आहे: ते Xiaomi Chromium 34 (किंवा 35) मध्ये कार्य करणार नाही, जे Chromium वर आधारित आहे आणि म्हणून कोणतेही मूल्य आवश्यक नाही, परंतु त्याच वेळी Android प्रमाणे "मास्करेड" आवश्यक आहे.

माझी सुरुवातीची योजना स्लाइडर शैलींमध्ये प्रवेश करणे आणि ते माझ्याशी जुळले की नाही ते पहाणे ही होती. ते बसत नसल्यास, आम्ही स्लाइडर-क्षैतिज वापरतो:

window.getComputedStyle(slider,"::-webkit-slider-thumb").उंची;

असे दिसून आले की हा दृष्टिकोन नेहमीच डीफॉल्ट शैली आउटपुट करतो, तुमच्या CSS नाही. सर्वसाधारणपणे, ट्रॅक किंवा स्लाइडरसह काहीतरी करण्याचा प्रयत्न करणाऱ्या स्क्रिप्ट्स कार्य करत नाहीत.

मग मी पाहिले की getComputedStyle() चा हा वापर Android WebKit मध्ये समर्थित नाही. कोणतीही शैली परत केली जात नाही, अगदी डीफॉल्ट शैली देखील नाही.

म्हणून मी एक उत्कृष्ट युक्ती लिहिली जी एक बग वापरून दुसऱ्या असंबंधित दोषापासून मुक्त होण्यासाठी वापरते. सुदैवाने, ही एक सुरक्षित युक्ती आहे, कारण दोन्ही त्रुटी फक्त Android WebKit मध्ये दिसू शकतात आणि तो ब्राउझर आता विकसित होत नाही:

var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").उंची; जर (!testAndWK) ( slider.style.WebkitAppearance = "स्लायडर-क्षैतिज"; )

तुम्ही एकदा चाचणी चालवू शकता आणि प्रत्येक स्लाइडरसाठी परिणाम वापरू शकता. तुम्ही कोणत्या सीएसएस मालमत्तेची चाचणी करत आहात हे महत्त्वाचे नाही, ते प्रत्यक्षात अस्तित्त्वात आहे का ते तपासा. कोणतेही मूल्य न मिळाल्यास, प्रत्येक स्लाइडरसाठी -webkit-appearance: slider-horizontal सेट करा. समस्या सोडवली. आणखी चांगले, आम्ही -webkit- वापरत असताना इतर ब्राउझर आमच्याकडे दुर्लक्ष करतात.

प्रगती पट्टी भरत आहे

माझ्या उदाहरणात, स्लाइडरच्या डावीकडील ट्रॅकचा उजवीकडील ट्रॅकपेक्षा भिन्न पार्श्वभूमी रंग असावा. IE/Edge आणि Firefox यासाठी छद्म-घटक वापरण्याची सूचना करतात, वेबकिट आणि ब्लिंक करत नाहीत. हा कोड IE, Firefox आणि Edge च्या सर्व आवृत्त्यांमधील समस्या सोडवतो:

इनपुट::-ms-फिल-लोअर (पार्श्वभूमी-रंग: #5082e0; ) इनपुट::-moz-श्रेणी-प्रगती (पार्श्वभूमी-रंग: #5082e0; )

वेबकिट आणि ब्लिंकवर आधारित ब्राउझरसाठी, JavaScript सह समाधान आवश्यक आहे. मी ॲना ट्यूडरच्या उदाहरणांवरून माझे कर्ज घेतले आहे. हे सोल्यूशन सध्याच्या स्लाइडर मूल्यावरून मोजलेल्या स्टॉप कलरसह रेखीय ग्रेडियंट वापरते. स्क्रिप्ट पहा, विशेषतः handleSlider() फंक्शनसाठी कोड.

टूलटिप्स

ॲना ट्यूडरने हे देखील दाखवले आहे की :before pseudo-element चा वापर सध्याच्या मूल्यासह शैलीबद्ध टूलटिप म्हणून कसा केला जाऊ शकतो. दुर्दैवाने, असे दिसून आले की IE/Edge आणि Firefox या प्रकरणात :before किंवा :after ला सपोर्ट करत नाहीत. IE/Edge मध्ये अंगभूत टूलटिप आहे (खाली पहा), परंतु Firefox टूलटिप प्रदर्शित करू शकत नाही.

मी स्लाइडरच्या हालचालीवर प्रतिक्रिया देणारा एक हलणारा घटक वापरून पाहिला, परंतु स्क्रिप्ट लिहिणे कार्य करत नाही आणि स्लाइडरचे वर्तमान निर्देशांक मिळवणे अशक्य आहे. मी निर्देशांकांऐवजी वर्तमान स्लाइडर मूल्य वापरण्याचा देखील प्रयत्न केला, परंतु प्रयत्न अयशस्वी झाला. शेवटी, आम्ही स्टॅटिक टूलटिप वापरण्याचे ठरवले (जे प्रत्यक्षात टूलटिपसारखे दिसत नाही).

IE/Edge मध्ये एक अंगभूत टूलटिप आहे जी बहुतेक भागांसाठी शैलीबद्ध केली जाऊ शकत नाही. सुदैवाने, आपण ते लपवू शकता:

इनपुट::-ms-टूलटिप (प्रदर्शन: काहीही नाही;)

इव्हेंट इनपुट करा आणि बदला

वापरकर्ता स्लाइडरला ट्रॅकच्या बाजूने हलवत असताना, स्लाइडर इनपुट ट्रिगर करू शकतो किंवा इव्हेंट बदलू शकतो. काही ब्राउझर हालचाल करताना इव्हेंट्स सतत "स्पॉन" करतात, तर काही हालचाल थांबल्यानंतरच.

स्लायडरसह वापरकर्त्याच्या क्रियांचा मागोवा घेत असताना, इनपुट इंटरसेप्ट करा आणि इव्हेंट बदला. नंतर जेव्हा वापरकर्ता स्लायडर हलवणे थांबवतो तेव्हा इव्हेंट हँडलरला कॉल करा. हे सर्व ब्राउझरमध्ये स्थिर परिणाम देते.

सर्वांना नमस्कार, मी तुम्हाला HTML 5 इनपुट घटक श्रेणी प्रकार, एक प्रकारचा स्लाइडर, सोयीस्कर आणि आधुनिक कसे शैलीबद्ध करू शकता याबद्दल एक लेख लिहिण्याचे ठरवले आहे एक उदाहरण. मला ताबडतोब सांगायचे आहे की स्टाइलिंगमध्ये व्यावहारिकदृष्ट्या कोणतीही समस्या नाही, परंतु जर तुम्हाला त्यासह काही क्रिया करण्याची देखील आवश्यकता असेल तर, मी खाली चर्चा करेन अशा अडचणी आहेत. काही उपाय आहेत, पण मुलभूत उपाय होताच, मी नक्कीच लेखात जोडेन =)

इनपुट प्रकार श्रेणी html

प्रारंभ करण्यासाठी, फक्त html कोड लिहूया, मी श्रेणी प्रकारासह दोन इनपुट जोडेन, एक ब्राउझरमध्ये मूळ दृश्य म्हणून दर्शविला जाईल आणि आम्ही दुसरा बदलू आणि त्यास श्रेणी वर्ग देऊ:

रेंज

मी आधीपासून JS कोड लिहिण्यासाठी एक फाइल तयार केली आहे, स्टाईल शीट असलेली फाइल आणि JQuery लायब्ररीला जोडलेली आहे दोन्ही इनपुटची कमाल आणि किमान व्हॅल्यू आहे आणि प्रारंभिक मूल्य देखील 25 वर सेट केले आहे
स्टाईलसह फाइल उघडा आणि wrp वर्गासह html, बॉडी आणि ब्लॉकसाठी ताबडतोब शैली सेट करा:

html, शरीर(

रुंदी: 100%;

उंची: 100%;

पॅडिंग:0;

समास:0;

.wrp (

रुंदी:700px;

मार्जिन: 0 ऑटो;

margin-top:20px;

उंची: 70%;

इनपुट प्रकार श्रेणी बार आणि स्लाइडर

क्रोम सारख्या सामान्य ब्राउझरसाठी शैली सेट करू या, येथे अर्थातच class.range साठी शैली सेट करूया:

.range(

-वेबकिट-दिसणे: काहीही नाही;

अशा प्रकारे, आम्ही मानक शैली रीसेट केल्यासारखे दिसत आहे आणि आपण ट्रॅक लाइनसाठी स्वतःच्या शैली सुरक्षितपणे लिहू शकता.

.range(

-वेबकिट-दिसणे: काहीही नाही;

सीमा-त्रिज्या:2px;

रुंदी: 600px;

उंची: 10px;

बाह्यरेखा: काहीही नाही;

सीमा: 1px घन #D4D4D4;

येथे अलौकिक काहीही नाही, म्हणून प्रत्येकजण आपल्या आवडीनुसार ट्रॅक लाइन बनवतो. आता स्लाइडरसाठी शैली सेट करूया, ती गोष्ट जी आपण प्लेअरमध्ये खेचतो किंवा हलवतो ती स्लाइडरसाठी शैली सेट करण्यासाठी, आपल्याला स्यूडो-एलिमेंट ::-वेबकिट-स्लायडर-थंब जोडणे आवश्यक आहे आणि शैली देखील रीसेट करणे आवश्यक आहे. आणि मग आम्हाला पाहिजे तसे करा

.range::-webkit-slider-thumb (

-वेबकिट-दिसणे: काहीही नाही;

रुंदी:18px;

उंची:18px;

पार्श्वभूमी:#D4D4D4;

सीमा-त्रिज्या:18px;

कर्सर:पॉइंटर;

संक्रमण:.1s;

सर्व काही स्पष्ट आणि सोपे देखील आहे, ज्याला शेवटच्या संक्रमणाच्या गुणधर्माबद्दल माहिती नसेल अशा व्यक्तीला राज्यांमध्ये एक ॲनिमेटेड संक्रमण सेट करणे आहे, म्हणजे, माझ्याकडे एक छद्म-वर्ग असेल : hover , आणि एक गुळगुळीत संक्रमण I असेल. हे गुणधर्म जोडूया:होव्हर, पण :सक्रिय देखील

.range::-webkit-slider-thumb:hover, .range::-webkit-slider-thumb:active(

रुंदी: 24px;

उंची: 24px;

सर्व काही सोपे आणि गुळगुळीत देखील आहे. उदाहरणार्थ, आम्ही ते Chrome किंवा Yandex ब्राउझरमध्ये उघडल्यास, सर्वकाही जसे पाहिजे तसे दिसते. इतर ब्राउझरसाठी, सर्व ठिकाणी एकत्र आम्ही आम्हाला आवश्यक असलेले वेबकिट जोडतो, म्हणजे:
- Mozilla moz साठी,
- ऑपेरा ओ साठी,
- IE ms साठी, परंतु आम्ही नंतर InternetExplorer बद्दल बोलू हे लक्षात ठेवा की प्रत्येक ब्राउझरसाठी शैली पुन्हा कराव्या लागतील, अन्यथा आपण स्वल्पविरामाने विभक्त केलेले छद्म घटक एकत्र केले आणि लिहिल्यास ते कार्य करणार नाही. खाली मी कोणता छद्म घटक कोणासाठी आहे ते दर्शवितो

इनपुट प्रकार श्रेणी प्रगती बार

मला प्रामाणिकपणे याला काय म्हणतात हे माहित नाही, परंतु हा एक बार आहे जो आमच्या स्लाइडरला ड्रॅग करतो किंवा हलवतो तेव्हा त्याचे अनुसरण करतो, तो लोडिंग बार, प्रक्रिया बार, प्रगती बार असू शकतो, मला काही प्रकार माहित नाही सर्वसाधारणपणे सूचक, परंतु मला वाटते की आम्ही कशाबद्दल बोलत आहोत हे तुम्हाला समजले आहे, कारण आम्ही एकाच तरंगलांबीवर आहोत, जर खालील चित्रात ते निळे असेल तर: डी म्हणून, ते बनवण्यासाठी तुम्हाला पार्श्वभूमी किंवा पार्श्वभूमी-प्रतिमा गुणधर्म आवश्यक आहेत, कोण करतो ते

25% , #ffff 25% , #ffff 100%);

फायरफॉक्स ब्राउझरसाठी, आम्ही वेबकिटऐवजी moz वापरतो. मी त्या ठिकाणी ठळकपणे हायलाइट केले आहे जिथे आपण मूल्ये बदलतो जेणेकरून बार इनपुटच्या मूल्याबरोबरच हलतो. आम्ही आत्ता हललो तर पट्टी हलणार नाही, आम्ही त्याबद्दल नंतर बोलू
वचन दिल्याप्रमाणे, मी कोणत्या ब्राउझरसाठी कोणत्या शैली योग्य आहेत याची यादी लिहित आहे

ब्लिंक, वेबकिट

हे Chrome, Yandex, Opera आणि Safari साठी योग्य आहे:

ट्रॅक स्वतः स्टाईल करण्यासाठी, तुम्हाला फक्त एक वर्ग, अभिज्ञापक किंवा घटकाचे फक्त नाव वापरण्याची आवश्यकता आहे, म्हणजे, स्यूडो-एलिमेंट्सची आवश्यकता नाही.

प्रगती रेषा शैलीबद्ध करण्यासाठी, ते वर लिहिले आहे.

स्लायडरला स्टाईल करण्यासाठी, तुम्हाला स्यूडो-एलिमेंट::-वेबकिट-स्लायडर-थंब जोडणे आवश्यक आहे.

मोझीला

Mozilla, हे थोडे वेगळे आहे, परंतु तरीही सोपे आहे

ट्रॅक स्टाईल करण्यासाठी, एक स्यूडो-एलिमेंट::-moz-range-track जोडा

प्रगती जास्त आहे

स्यूडो-एलिमेंटसह स्लाइडर::-moz-range-thumb

इंटरनेट एक्सप्लोरर

हे येथे पूर्णपणे भिन्न आहे, आपण या ब्राउझरसह वेडे व्हाल, सर्वसाधारणपणे, IE आमच्या इनपुटला तीन भागांमध्ये विभाजित करते, म्हणून येथे नियम आहेत:

ट्रॅक लाईन स्टाईल करण्यासाठी, आम्ही तीन स्यूडो-एलिमेंट्स वापरतो, कारण इनपुट तीन भागांमध्ये विभागलेले आहे, ते आहेत::-ms-track, ::-ms-fill-lower, ::-ms-fill-upper.

स्लाइडर - ::-ms-thumb

व्यक्तिशः, मी त्याची IE वर चाचणी केली नाही, कारण ते स्थापित केल्यानंतर माझे विंडोज क्रॅश झाले आणि मी ते पुन्हा केले नाही, मी काहीतरी नवीन शिकल्यामुळे मी ते येथे दुरुस्त करीन =)

इनपुट श्रेणी JQuery

पार्श्वभूमी:-वेबकिट-लिनियर-ग्रेडियंट(डावीकडे ,#8870FF 0%,#8870FF 25% ,#fff 25% , #fff 100%);

मी हे आधीच वर लिहिले आहे, हे आपण वापरतो
योजना खालीलप्रमाणे आहे: जर आपण "बदला" इव्हेंट हँडलर स्थापित केला आणि इनपुटचे मूल्य मिळविण्यासाठी त्याचा वापर केला आणि नंतर CSS गुणधर्म बदलले, तर ते असे कार्य करेल: स्लाइडर हलवा आणि माउस बटण सोडा, नंतर ओळ हलवेल.
आणि हे तार्किक आहे, परंतु पूर्णपणे सुंदर नाही, म्हणून मी दुसरा उपाय सुचवितो
script.js फाईल उघडा किंवा html मध्येच लिहा, काही फरक पडत नाही आणि हे कार्य लिहा:

कार्य श्रेणी()

val = $(".श्रेणी").val();

$(."रेंज").css(("पार्श्वभूमी":"-वेबकिट-लिनियर-ग्रेडियंट(डावीकडे ,#8870FF 0%,#8870FF "+val+"%,#fff "+val+"%, #fff 100% )"));

सर्व काही सोपे आहे, आम्ही बदल इव्हेंट दरम्यान तेच करतो, मूल्य मिळवतो आणि योग्य ठिकाणी शैली बदलतो, फक्त लक्षात ठेवा की मूल्ये टक्केवारीत असावीत, कारण माझे इनपुट 0 ते 100 पर्यंत आहे , मी काहीही मोजत नाही, परंतु जर, उदाहरणार्थ, ते 0 ते 120 पर्यंत असेल, तर मी फॉर्म्युला (val*100)/120 द्वारे परिणामी मूल्य पास करेन, म्हणजेच मला संख्येची टक्केवारी मिळेल मला वाटते की हे स्पष्ट आहे, हे शेवटी कार्य करण्यासाठी, आपल्याला हे फंक्शन इनपुटच्या ऑनइनपुट इव्हेंटमध्ये सूचित करणे आवश्यक आहे:

एवढेच, आता चालेल
बरं, आता मुतखडा ज्याबद्दल मी सुरुवातीला बोललो होतो
आज मला माहित आहे की हे वैशिष्ट्य Mozilla मध्ये कार्य करणार नाही का नाही?
उत्तर सोपे आहे आणि पृष्ठभागावर आहे, कारण Mozilla साठी आम्ही केवळ स्यूडो-एलिमेंट वापरून शैली बदलू शकतो, परंतु JavaScript साठी स्यूडो-एलिमेंट्स DOM मध्ये अस्तित्वात नाहीत, म्हणून आम्ही त्यासह कार्य करू शकत नाही. जर एखादे एक-वेळचे कार्य असेल, उदाहरणार्थ, फक्त रंग बदलणे, आम्ही फक्त द्वितीय श्रेणी वापरू शकतो, परंतु या प्रकरणात, मित्रांनो, मला अद्याप काहीही सापडले नाही किंवा समोर आले नाही, कोणाला माहित असल्यास, लिहा = )

निष्कर्ष

तत्वतः, हे सर्व आहे, परंतु अतिरिक्त भाग असलेली गाडी येताच, मी ते निश्चितपणे लेखात जोडेन धन्यवाद, अलविदा =)

स्लायडर निर्दिष्ट श्रेणीमध्ये संख्या प्रविष्ट करण्यासाठी डिझाइन केले आहे, परंतु फील्डच्या विपरीत, त्याचा एक वेगळा इंटरफेस आहे आणि तो अशा प्रकरणांमध्ये वापरला जातो जेथे अचूक मूल्य सूचित करणे विशेषतः महत्वाचे नसते. अंजीर मध्ये. 1 वेगवेगळ्या ब्राउझरमध्ये स्लाइडरचे स्वरूप दर्शविते.

तांदूळ. 1. ब्राउझरमध्ये स्लाइडर दृश्य

स्लाइडर तयार करण्यासाठी वाक्यरचना खालीलप्रमाणे आहे.

येथे min ही श्रेणीतील किमान संख्या आहे (डीफॉल्ट 0), कमाल म्हणजे कमाल संख्या (डिफॉल्ट 100), पायरी म्हणजे संख्या बदलण्याची पायरी (डिफॉल्ट 1), मूल्य हे वर्तमान मूल्य आहे. डीफॉल्टनुसार, सूत्र वापरून मूल्य मोजले जाते:

जर कमाल चे मूल्य min च्या मूल्यापेक्षा कमी असेल, तर मूल्य min च्या बरोबरीचे असेल.

विशेषता ऐच्छिक आहेत, ते वगळले जाऊ शकतात, अशा परिस्थितीत ते डीफॉल्ट मूल्ये घेतात.

किमान आणि कमाल संख्या कितीही असली तरी, स्लाइडरची रुंदी समान राहते.

स्लाइडर स्वतःच त्यांच्या "शुद्ध" स्वरूपात क्वचितच वापरले जातात, कारण ते वापरकर्त्याला आवश्यक अभिप्राय देत नाहीत, परंतु JavaScript च्या संयोजनात ते एक शक्तिशाली आणि सोयीस्कर इंटरफेस घटक बनतात. उदाहरणार्थ 1, स्लाइडरचा वापर प्रतिमा आकार बदलण्यासाठी केला जातो;

उदाहरण 1: स्लाइडर वापरणे

HTML5 IE 10 Cr Op Sa Fx

स्लाइडर फंक्शन sizePic() ( आकार = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )

नमुना आकार:

या उदाहरणात, स्लायडर नियंत्रित केल्यावर, ऑनइनपुट इव्हेंट फायर केला जातो, जो साइजपिक फंक्शनला कॉल करतो. हे फंक्शन वापरकर्त्याने सेट केलेल्या स्लाइडर मूल्यावर अवलंबून प्रतिमेचा आकार बदलते. अशा प्रकारे, प्रतिमेची रुंदी, इच्छित असल्यास, कमी होते किंवा, उलट, वाढते. Chrome ब्राउझरमधील स्लाइडरच्या अत्यंत मूल्यासह उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. 2.

तांदूळ. 2. स्लायडर वापरून प्रतिमेची रुंदी नियंत्रित करा

ब्राउझरच्या जुन्या आवृत्त्या जे प्रकार विशेषतासाठी श्रेणी मूल्यास समर्थन देत नाहीत ते फॉर्म फील्ड मजकूर फील्ड म्हणून प्रस्तुत करतात.

स्लायडर निर्दिष्ट श्रेणीमध्ये संख्या प्रविष्ट करण्यासाठी डिझाइन केले आहे, परंतु फील्डच्या विपरीत, त्याचा एक वेगळा इंटरफेस आहे आणि तो अशा प्रकरणांमध्ये वापरला जातो जेथे अचूक मूल्य सूचित करणे विशेषतः महत्वाचे नसते. अंजीर प्रमाणे ब्राउझर स्लाइडरचे स्वरूप त्यांच्या स्वत: च्या मार्गाने प्रदर्शित करतात. आकृती 1 Chrome मधील स्लाइडरचे दृश्य प्रदर्शित करते.

तांदूळ. 1. स्लाइडर दृश्य

स्लाइडर तयार करण्यासाठी वाक्यरचना खालीलप्रमाणे आहे.

येथे min ही श्रेणीतील किमान संख्या आहे (डीफॉल्ट 0), कमाल म्हणजे कमाल संख्या (डिफॉल्ट 100), पायरी म्हणजे संख्या बदलण्याची पायरी (डिफॉल्ट 1), मूल्य हे वर्तमान मूल्य आहे. डीफॉल्टनुसार, सूत्र वापरून मूल्य मोजले जाते:

जर कमाल चे मूल्य min च्या मूल्यापेक्षा कमी असेल, तर मूल्य min च्या बरोबरीचे असेल.

विशेषता ऐच्छिक आहेत, ते वगळले जाऊ शकतात, अशा परिस्थितीत ते डीफॉल्ट मूल्ये घेतात. किमान आणि कमाल संख्या कितीही असली तरी, स्लाइडरची रुंदी समान राहते.

स्लाइडर स्वतःच त्यांच्या "शुद्ध" स्वरूपात क्वचितच वापरले जातात, कारण ते वापरकर्त्याला आवश्यक अभिप्राय देत नाहीत, परंतु JavaScript च्या संयोजनात ते एक शक्तिशाली आणि सोयीस्कर इंटरफेस घटक बनतात. उदाहरणार्थ 1, स्लाइडरचा वापर प्रतिमा आकार बदलण्यासाठी केला जातो;

उदाहरण 1: स्लाइडर वापरणे

स्लाइडर फंक्शन sizePic() ( आकार = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )

नमुना आकार:

या उदाहरणात, स्लायडर नियंत्रित केल्यावर, ऑनचेंज इव्हेंट फायर केला जातो, जो साइजपिक फंक्शनला कॉल करतो. हे फंक्शन वापरकर्त्याने सेट केलेल्या स्लाइडर मूल्यावर अवलंबून प्रतिमेचा आकार बदलते. अशा प्रकारे, प्रतिमेची रुंदी, इच्छित असल्यास, कमी होते किंवा उलट वाढते. IE ब्राउझरमधील उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. 2.