Slider
कंपोज़ेबल की मदद से, उपयोगकर्ता
वैल्यू. आप स्लाइडर का इस्तेमाल करके, उपयोगकर्ता को ये काम करने की अनुमति दे सकते हैं:
- उन सेटिंग को अडजस्ट करें जो वैल्यू की रेंज का इस्तेमाल करती हैं. जैसे, आवाज़ और स्क्रीन की रोशनी.
- कीमत की सीमा सेट करने की तरह, ग्राफ़ में डेटा फ़िल्टर करना.
- उपयोगकर्ता का इनपुट, जैसे कि किसी समीक्षा में रेटिंग सेट करना.
स्लाइडर में एक ट्रैक, पसंद करने का थंब बटन, वैल्यू लेबल, और टिक के निशान होते हैं:
- ट्रैक: ट्रैक एक हॉरिज़ॉन्टल बार है, जो जो स्लाइडर ले सकते हैं.
- थंब: अंगूठा स्लाइडर पर एक खींचने और छोड़ने लायक कंट्रोल एलिमेंट होता है इससे उपयोगकर्ता, ट्रैक करने के लिए.
- टिक मार्क: टिक मार्क, विकल्प के तौर पर मौजूद विज़ुअल मार्कर या इंडिकेटर होते हैं. ये स्लाइडर के ट्रैक के साथ दिखते हैं.
बुनियादी तौर पर लागू करना
एपीआई की पूरी परिभाषा जानने के लिए, Slider
का रेफ़रंस देखें. डिजिटल बटन का पता लगाने के लिए,
Slider
कंपोज़ेबल के लिए पैरामीटर इस तरह हैं:
value
: स्लाइडर की मौजूदा वैल्यू.onValueChange
: हर बार वैल्यू के बराबर होने पर, लैम्डा को कॉल किया जाता है बदल दिया गया है.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()) } }