स्लाइडर

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())
    }
}
Slider.kt

लागू होने पर यह ऐसा दिखता है:

एक स्लाइडर कॉम्पोनेंट जिसकी वैल्यू को ट्रैक पर करीब तीन चौथाई चुना गया है.
दूसरी इमेज. स्लाइडर को लागू करने का बुनियादी तरीका.

बेहतर तरीके से लागू करना

ज़्यादा जटिल स्लाइडर को लागू करते समय, पैरामीटर का इस्तेमाल करें.

  • 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())
    }
}
Slider.kt

लागू होने की जानकारी इस तरह दिखती है:

वैकल्पिक लेख यहां लिखें
तीसरी इमेज. स्लाइडर, जिसमें चरण और सेट की गई वैल्यू की सीमा मौजूद है.

रेंज स्लाइडर

इसके लिए, 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())
    }
}
Slider.kt

रेंज स्लाइडर कॉम्पोनेंट, जिसमें दो वैल्यू चुनी गई हैं. लेबल, चुने गए हिस्से की ऊपरी और निचली सीमाएं दिखाता है.
चौथी इमेज. रेंज स्लाइडर को लागू करने का उदाहरण.

अन्य संसाधन