স্লাইডার

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

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

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

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

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

সম্পূর্ণ API সংজ্ঞার জন্য 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())
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

ট্র্যাকের প্রায় তিন চতুর্থাংশ বরাবর বেছে নেওয়া ভ্যালু সহ স্লাইডার কম্পোনেন্ট।
ছবি ২. স্লাইডারের একটি প্রাথমিক বাস্তবায়ন।

উন্নত প্রয়োগ

আরও জটিল স্লাইডার প্রয়োগ করার সময়, আপনি অতিরিক্তভাবে নিম্নলিখিত প্যারামিটারগুলি ব্যবহার করতে পারেন।

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

ইমপ্লিমেন্টেশনটি এইভাবে দেখানো হয়:

০ থেকে ৫০ রেঞ্জের মধ্যে একটি পৃথক স্লাইডার, সমান ব্যবধানে পাঁচটি টিক চিহ্ন দেখাচ্ছে। থাম্বটি দ্বিতীয় টিক চিহ্নের কাছাকাছি অবস্থান করছে, যা ১৬-এর একটি নির্বাচিত মান নির্দেশ করছে।
ছবি ৩. ধাপ ও সেট করা ভ্যালু রেঞ্জ সহ স্লাইডার।

রেঞ্জ স্লাইডার

এছাড়াও, আপনি নির্দিষ্ট 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())
    }
}

দুটি ভ্যালু বেছে নেওয়া সহ রেঞ্জ স্লাইডার কম্পোনেন্ট। একটি লেবেল বেছে নেওয়া অংশের উপরের ও নিচের সীমা দেখায়।
ছবি ৪. রেঞ্জ স্লাইডারের প্রয়োগ।

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