स्लाइडर

The 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

अन्य संसाधन

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