स्लाइडर

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 UI के दस्तावेज़