Ползунок

Composable-функция Slider позволяет пользователям выбирать значения из диапазона. Ползунок можно использовать, чтобы позволить пользователю:

• Настраивайте параметры, которые используют диапазон значений, например громкость и яркость.
• Фильтрация данных на графике, например при установке диапазона цен.
• Пользовательский ввод, например оценка в отзыве.

Ползунок состоит из дорожки, бегунка, метки значения и делений.

• Дорожка. Горизонтальная полоса, которая представляет диапазон значений ползунка.
• Ползунок. Перетаскиваемый элемент управления, который позволяет пользователю выбрать определенное значение в диапазоне, заданном дорожкой.
• Деления. Необязательные визуальные маркеры или индикаторы, которые появляются вдоль дорожки ползунка.

Рисунок 1. Реализация ползунка.

Базовый вариант

Полное описание API приведено в справочнике по Slider. Вот некоторые из ключевых параметров для composable-функции 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

Вот как это выглядит:

Рисунок 2. Базовая реализация ползунка.

Расширенная реализация

При реализации более сложного ползунка можно дополнительно использовать следующие параметры.

• 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

Реализация выглядит следующим образом:

Рисунок 3. Ползунок с шагами и заданным диапазоном значений.

Примечание. Начало и конец ползунка считаются шагами. В предыдущем примере, где диапазон равен 0f..50f, а количество steps – 3, каждый интервал в диапазоне равен 12.5, поскольку начало и конец ползунка также являются интервалами, которые пользователь может выбрать.

Примечание. Вы также можете передать Slider composable-функции thumb и track, чтобы более тщательно настроить внешний вид компонента.

Ползунок для выбора диапазона

Вы также можете использовать специальную composable-функцию 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

Рисунок 4. Реализация ползунка для выбора диапазона.

Дополнительные ресурсы

• Документация по Material UI