Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Thành phần kết hợp Slider cho phép người dùng lựa chọn trong một phạm vi các giá trị. Bạn có thể sử dụng thanh trượt để cho phép người dùng làm những việc sau:
Điều chỉnh các chế độ cài đặt sử dụng một phạm vi giá trị, chẳng hạn như âm lượng và độ sáng.
Lọc dữ liệu trong biểu đồ, chẳng hạn như khi đặt phạm vi giá.
Thông tin do người dùng nhập, chẳng hạn như đặt điểm xếp hạng trong bài đánh giá.
Thanh trượt chứa một dải, con trỏ, nhãn giá trị và dấu đánh dấu:
Đường dẫn: Đường dẫn là thanh ngang đại diện cho phạm vi giá trị mà thanh trượt có thể nhận.
Thumb (Con trỏ): Con trỏ là một thành phần điều khiển có thể kéo trên thanh trượt, cho phép người dùng chọn một giá trị cụ thể trong phạm vi do kênh xác định.
Dấu đánh dấu: Dấu đánh dấu là các điểm đánh dấu hoặc chỉ báo hình ảnh không bắt buộc xuất hiện dọc theo đường trượt của thanh trượt.
Chủ đề này trình bày các cách triển khai thanh trượt sau:
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo thanh trượt cơ bản
Ví dụ sau đây là một thanh trượt đơn giản. Điều đó cho phép người dùng chọn một giá trị từ 0.0 đến 1.0. Vì người dùng có thể chọn bất kỳ giá trị nào trong phạm vi đó, nên thanh trượt là liên tục.
Kết quả
Hình 1. Cách triển khai cơ bản của thanh trượt.
Tạo thanh trượt nâng cao
Đoạn mã sau đây triển khai một thanh trượt có ba bước, với phạm vi từ 0.0 đến 50.0. Vì ngón tay cái chụp vào từng bước, nên thanh trượt này là riêng biệt.
Kết quả
Hình 2. Một thanh trượt có các bước và một phạm vi giá trị đã đặt.
Thanh trượt phạm vi
Bạn cũng có thể sử dụng thành phần kết hợp RangeSlider chuyên dụng. Điều này cho phép người dùng chọn hai giá trị. Điều này có thể hữu ích trong các trường hợp như khi người dùng muốn chọn giá tối thiểu và tối đa.
Ví dụ sau đây là một ví dụ tương đối đơn giản về thanh trượt phạm vi liên tục:
Kết quả
Hình 3. Cách triển khai thanh trượt phạm vi.
Điểm chính
Hãy xem tài liệu tham khảo Slider để biết định nghĩa đầy đủ về API. Sau đây là một số tham số chính của thành phần kết hợp Slider:
value: Giá trị hiện tại của thanh trượt.
onValueChange: Một hàm lambda được gọi mỗi khi giá trị thay đổi.
enabled: Giá trị boolean cho biết người dùng có thể tương tác với thanh trượt hay không.
Khi triển khai một thanh trượt phức tạp hơn, bạn cũng có thể sử dụng các tham số sau.
colors: Một thực thể của SliderColors cho phép bạn kiểm soát màu sắc của thanh trượt.
valueRange: Phạm vi giá trị mà thanh trượt có thể nhận.
steps: Số lượng rãnh trên thanh trượt mà ngón tay cái sẽ chụp lại.
Bạn cũng có thể truyền Slider một thành phần kết hợp thumb và track để tuỳ chỉnh giao diện của thành phần một cách kỹ lưỡng hơn.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Hiển thị các thành phần tương tác
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],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)"]]
