Slider
कंपोज़ेबल की मदद से, उपयोगकर्ता
वैल्यू. आप स्लाइडर का इस्तेमाल करके, उपयोगकर्ता को ये काम करने की अनुमति दे सकते हैं:
- उन सेटिंग को अडजस्ट करें जो वैल्यू की रेंज का इस्तेमाल करती हैं. जैसे, आवाज़ और स्क्रीन की रोशनी.
- कीमत की सीमा सेट करते समय, ग्राफ़ में डेटा फ़िल्टर करें.
- उपयोगकर्ता का इनपुट, जैसे कि किसी समीक्षा में रेटिंग सेट करना.
स्लाइडर में एक ट्रैक, पसंद करने का थंब बटन, वैल्यू लेबल, और टिक के निशान होते हैं:
- ट्रैक: ट्रैक एक हॉरिज़ॉन्टल बार है, जो जो स्लाइडर ले सकते हैं.
- थंब: अंगूठा स्लाइडर पर एक खींचने और छोड़ने लायक कंट्रोल एलिमेंट होता है इससे उपयोगकर्ता, ट्रैक करने के लिए.
- टिक मार्क: टिक मार्क का इस्तेमाल, विज़ुअल मार्कर या इंडिकेटर के तौर पर करना ज़रूरी नहीं है. स्लाइडर के ट्रैक के साथ-साथ दिखाए जाते हैं.
बुनियादी तौर पर लागू करना
एपीआई की पूरी परिभाषा जानने के लिए, Slider
का रेफ़रंस देखें. डिजिटल बटन का पता लगाने के लिए,
कंपोज़ेबल Slider
के लिए पैरामीटर इस तरह हैं:
value
: स्लाइडर की मौजूदा वैल्यू.onValueChange
: हर बार वैल्यू के बराबर होने पर, एक Lambda फ़ंक्शन कॉल किया जाता है बदल दिया गया है.enabled
: यह एक बूलियन वैल्यू होती है, जिससे पता चलता है कि उपयोगकर्ता, किसी वेबसाइट के साथ इंटरैक्ट कर सकता है या नहीं स्लाइडर चुनें.
नीचे दिए गए उदाहरण में, एक सादगी भरा स्लाइडर है. इससे उपयोगकर्ता को ये काम करने में मदद मिलती है
0.0
से 1.0
तक कोई मान चुनें. क्योंकि उपयोगकर्ता कोई भी वैल्यू चुन सकता है
उस रेंज में, स्लाइडर लगातार पर सेट रहता है.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
यह लागू होने का तरीका इस तरह दिखता है:
बेहतर तरीके से लागू करना
ज़्यादा जटिल स्लाइडर को लागू करते समय, पैरामीटर का इस्तेमाल करें.
colors
:SliderColors
का एक इंस्टेंस, जो आपको स्लाइडर के रंग.valueRange
: स्लाइडर में तय की गई वैल्यू की सीमा.steps
: स्लाइडर पर अंगूठे को दबाने पर नॉच की संख्या.
नीचे दिया गया स्निपेट एक ऐसा स्लाइडर लागू करता है जिसमें तीन चरणों में एक रेंज शामिल है.
0.0
से 50.0
तक. हर चरण में अंगूठा स्नैप करता है, इसलिए यह स्लाइडर
अलग-अलग.
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
लागू होने की जानकारी इस तरह दिखती है:
रेंज स्लाइडर
खास तौर पर बनाए गए RangeSlider
कंपोज़ेबल का इस्तेमाल भी किया जा सकता है. इससे उपयोगकर्ता को ये काम करने में मदद मिलती है
दो मान चुनें. यह उन मामलों में उपयोगी हो सकता है जब उपयोगकर्ता चाहता है कि
कम से कम और ज़्यादा से ज़्यादा कीमत चुनें.
नीचे दिए गए उदाहरण में, लगातार एक साथ दिखाए जाने वाले रेंज स्लाइडर.
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }