স্লাইডার

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

অতিরিক্ত সম্পদ

• ম্যাটেরিয়াল UI ডক্স