يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة تطوير البرامج (SDK) لمشروعك على المستوى 21 من واجهة برمجة التطبيقات أو
مستوى أعلى.
التبعيات
إنشاء شريط تمرير أساسي
المثال التالي هو شريط تمرير بسيط. يتيح ذلك للمستخدم
اختيار قيمة من 0.0 إلى 1.0. ولأنّه يمكن للمستخدم اختيار أي قيمة في
هذا النطاق، يكون شريط التمرير متواصلًا.
النتائج
الشكل 1. تنفيذ أساسي لشريط التمرير
إنشاء شريط تمرير متقدّم
ينفِّذ المقتطف التالي شريط تمرير يتضمّن ثلاث خطوات، مع نطاق
من 0.0 إلى 50.0. وبما أنّ إصبع الإبهام ينقر على كل خطوة، يكون شريط التمرير
منفصلاً.
النتائج
الشكل 2. شريط تمرير يتضمّن خطوات ونطاقًا محدّدًا من القيم
شريط تمرير النطاق
يمكنك أيضًا استخدام العنصر القابل للتجميع المخصّص RangeSlider. يسمح هذا للمستخدم بتحديد
قيمتَين. ويمكن أن يكون ذلك مفيدًا في حالات مثل عندما يريد المستخدم
اختيار حدّ أدنى وأقصى للسعر.
يوضّح المثال التالي مثالاً بسيطًا نسبيًا على شريط التمرير المستمر
للنطاق:
النتائج
الشكل 3. مثال على شريط تمرير النطاق
النقاط الرئيسية
اطّلِع على مرجع Slider للحصول على تعريف كامل لواجهة برمجة التطبيقات. في ما يلي بعض الparameters
الرئيسية للعنصر القابل للتجميع Slider:
value: القيمة الحالية لأداة التمرير.
onValueChange: دالة lambda التي يتمّ استدعاؤها في كلّ مرّة يتمّ فيها
تغيير القيمة.
enabled: قيمة منطقية تشير إلى ما إذا كان بإمكان المستخدم التفاعل مع
شريط التمرير.
عند تنفيذ شريط تمرير أكثر تعقيدًا، يمكنك أيضًا الاستفادة من
المَعلمات التالية.
colors: مثيل SliderColors يتيح لك التحكّم في
ألوان شريط التمرير.
valueRange: نطاق القيم التي يمكن أن يأخذها شريط التمرير
steps: عدد الفتحات في شريط التمرير التي ينطبق عليها الإبهام
يمكنك أيضًا تمرير Slider عنصرَي thumb وtrack قابلَين للتجميع من أجل تخصيص شكل المكوّن بشكلٍ
أكثر دقة.
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول
أهداف تطوير Android الأوسع نطاقًا:
عرض المكونات التفاعلية
تعرَّف على كيفية استخدام الدوال القابلة للتجميع لإنشاء مكونات جميلة لواجهة المستخدم بسهولة استنادًا إلى نظام التصميم المتعدّد الأبعاد.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Create a slider for a range of values\n\n\u003cbr /\u003e\n\nThe [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) composable lets users make selections from a range of\nvalues. You might use a slider to let the user do the following:\n\n- Adjust settings that use a range of values, such as volume, and brightness.\n- Filter data in a graph, as when setting a price range.\n- User input, like setting a rating in a review.\n\nThe slider contains a track, thumb, value label, and tick marks:\n\n- **Track**: The track is the horizontal bar that represents the range of values the slider can take.\n- **Thumb**: The thumb is a draggable control element on the slider that allows the user to select a specific value within the range defined by the track.\n- **Tick marks**: Tick marks are optional visual markers or indicators that appear along the track of the slider.\n\nThis topic shows the following slider implementations:\n\n- [Basic](#basic-implementation)\n- [Advanced](#advanced-implementation)\n- [Range](#range-slider)\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic slider\n---------------------\n\nThe following example is a straightforward slider. That allows the user to\nselect a value from `0.0` to `1.0`. Because the user can select any value in\nthat range, the slider is *continuous*.\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun SliderMinimalExample() {\n var sliderPosition by remember { mutableFloatStateOf(0f) }\n Column {\n Slider(\n value = sliderPosition,\n onValueChange = { sliderPosition = it }\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L59-L70\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** A basic implementation of a slider.\n\nCreate an advanced slider\n-------------------------\n\nThe following snippet implements a slider that has three steps, with a range\nfrom `0.0` to `50.0`. Because the thumb snaps to each step, this slider is\n*discrete*.\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun SliderAdvancedExample() {\n var sliderPosition by remember { mutableFloatStateOf(0f) }\n Column {\n Slider(\n value = sliderPosition,\n onValueChange = { sliderPosition = it },\n colors = SliderDefaults.colors(\n thumbColor = MaterialTheme.colorScheme.secondary,\n activeTrackColor = MaterialTheme.colorScheme.secondary,\n inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,\n ),\n steps = 3,\n valueRange = 0f..50f\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L74-L92\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** A slider with steps and a set value range. **Note:** The very beginning and end of a slider count as \"steps\". In the preceding example where the range is `0f..50f` and the number of `steps` is `3`, each interval along the range is `12.5` because the beginning and end of the slider are also intervals the user can select.\n\nRange slider\n------------\n\nYou can also use the dedicated [`RangeSlider`](/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)) composable. This allows the user to\nselect two values. This can be useful in cases such as when the user wishes to\nselect a minimum and maximum price.\n\nThe following example is a relatively straightforward example of a continuous\nrange slider:\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun RangeSliderExample() {\n var sliderPosition by remember { mutableStateOf(0f..100f) }\n Column {\n RangeSlider(\n value = sliderPosition,\n steps = 5,\n onValueChange = { range -\u003e sliderPosition = range },\n valueRange = 0f..100f,\n onValueChangeFinished = {\n // launch some business logic update with the state you hold\n // viewModel.updateSelectedSliderValue(sliderPosition)\n },\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L96-L113\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** An implementation of a range slider.\n\nKey points\n----------\n\nSee the [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) reference for a full API definition. Some of the key\nparameters for the `Slider` composable are the following:\n\n- **`value`**: The current value of the slider.\n- **`onValueChange`**: A lambda that gets called every time the value is changed.\n- **`enabled`**: A boolean value that indicates if the user can interact with the slider.\n\nWhen implementing a more complex slider, you can additionally make use of the\nfollowing parameters.\n\n- **`colors`** : An instance of `SliderColors` that lets you control the colors of the slider.\n- **`valueRange`**: The range of values that the slider can take.\n- **`steps`**: The number of notches on the slider to which the thumb snaps.\n\nYou can also pass `Slider` a `thumb` and `track` composable to more\nthoroughly customize the appearance of the component.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
