स्लाइडर

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())
    }
}
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

अन्य संसाधन

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