स्लाइडर

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

अन्य संसाधन

• यूज़र इंटरफ़ेस (यूआई) के मटीरियल के दस्तावेज़