স্লাইডার

Slider কম্পোজ করার উপযুক্ত আইটেম ব্যবহারকারীদের বিভিন্ন ভ্যালু থেকে বেছে নিতে দেয়। ব্যবহারকারীকে নিম্নলিখিত কাজগুলি করতে দেওয়ার জন্য আপনি স্লাইডার ব্যবহার করতে পারেন:

• ভলিউম ও উজ্জ্বলতার মতো মানের রেঞ্জ ব্যবহার করে এমন সেটিংস অ্যাডজাস্ট করুন।
• গ্রাফে ডেটা ফিল্টার করা, যেমন দামের রেঞ্জ সেট করার সময়।
• ব্যবহারকারীর ইনপুট, যেমন রিভিউতে রেটিং সেট করা।

স্লাইডারে ট্র্যাক, থাম্ব, ভ্যালু লেবেল ও টিক মার্ক থাকে:

• ট্র্যাক: ট্র্যাক হল একটি অনুভূমিক বার যা স্লাইডার নিতে পারে এমন ভ্যালুর রেঞ্জকে দেখায়।
• থাম্ব: থাম্ব হল স্লাইডারের একটি ড্র্যাগ করা যায় এমন কন্ট্রোল এলিমেন্ট যা ব্যবহারকারীকে ট্র্যাকের দ্বারা সংজ্ঞায়িত রেঞ্জের মধ্যে একটি নির্দিষ্ট মান বেছে নিতে দেয়।
• টিক চিহ্ন: টিক চিহ্ন হল ঐচ্ছিক ভিজ্যুয়াল মার্কার বা ইন্ডিকেটর যা স্লাইডারের ট্র্যাক বরাবর দেখা যায়।

প্রাথমিক প্রয়োগ

সম্পূর্ণ API সংজ্ঞা পেতে 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

অতিরিক্ত রিসোর্স

• Material UI ডকুমেন্টেশন