FilledSlider is a customizable slider component built with Jetpack Compose, featuring a visually appealing filled track. It offers smooth and precise control over various settings and can be easily integrated into your Android app or project. With options for different colors, orientations, and progression types, FilledSlider enhances the user experience and adds a touch of elegance to your user interface.
Add the mavenCentral() on project level(root level) build.gradle file:
allprojects {
repositories {
mavenCentral()
}
}Add dependency on module level build.gradle file:
dependencies {
implementation "io.github.seyoungcho2:filled-slider-compose:1.0.0"
}If using build.gradle.kts
dependencies {
implementation("io.github.seyoungcho2:filled-slider-compose:1.0.0")
}FilledSlider provides various parameters to customize.
@Composable
fun FilledSlider(
modifier: Modifier,
sliderShape: Shape = RoundedCornerShape(50),
isEnabled: Boolean = true,
sliderColor: SliderColor = SliderColor(),
sliderOrientation: SliderOrientation = SliderOrientation.Vertical,
sliderType: SliderType = SliderType.Continuous,
dragSensitivity: Float = 1f,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
currentValue: Float,
setCurrentValue: (Float) -> Unit
)- modifier: The [Modifier] to be applied to this Slider.
- sliderShape: [Shape] applied to the Slider.
- isEnabled: Change slider enabled state. If disabled color is set to
- sliderColor: Colors applied to the Slider.
- sliderOrientation: Orientation for Slider. Vertical or Horizontal.
- sliderType: Continuous and Discrete types are supported.
- dragSensitivity: Drag sensitivity for slider. If the value is 1, the slider moves only as much as it is dragged.
- valueRange: Value range for slider
- currentValue: Current value for the Slider. It's forced to be in the range of [maxValue] and [minValue].
- setCurrentValue: Callback in which value should be updated
Pass class which implements Shape on Compose.
- RectangleShape
@Composable
fun RectangleShapeSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderShape= RectangleShape,
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
currentValue = currentValue,
sliderType = SliderType.Continuous,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}- RoundedCornerShape(50)
@Composable
fun RoundedCornerShapeSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderShape= RoundedCornerShape(50),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
currentValue = currentValue,
sliderType = SliderType.Continuous,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}SliderColor consist of 4 properties enabledTrackColor, disabledTrackColor, enabledIndicationColor, disabledIndicationColor
data class SliderColor(
val enabledTrackColor: Color = Color.Gray,
val disabledTrackColor: Color = enabledTrackColor,
val enabledIndicationColor: Color = Color.Black,
val disabledIndicationColor: Color = enabledIndicationColor
)
- enabledTrackColor: Track color when the slider is enabled.
- disabledTrackColor: Track color when the slider is disabled.
- enabledIndicationColor: Indication color for progression when the slider is enabled
- disabledIndicationColor: Indication color for progression when the slider is disabled.
- SliderType.Continuous : SliderType.Continuous makes slider progression changes continuously.
@Composable
fun ContinuousSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
currentValue = currentValue,
sliderType = SliderType.Continuous,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}- SliderType.Discrete : SliderType.Discrete makes slider progression changes discretely.
@Composable
fun DiscreteSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
currentValue = currentValue,
sliderType = SliderType.Discrete(5),
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}
- SliderOrientation.Horizontal: SliderOrientation.Horizontal makes slider progression to be changed by dragging right or left along the x-axis.
@Composable
fun HorizontalSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(150.dp, 50.dp).align(Alignment.Center),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
sliderOrientation = SliderOrientation.Horizontal,
currentValue = currentValue,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}- SliderOrientation.Vertical: SliderOrientation.Vertical makes slider progression to be changed by dragging up or down along the y-axis.
@Composable
fun VerticalSlider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderShape= RoundedCornerShape(50),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
sliderOrientation = SliderOrientation.Vertical,
currentValue = currentValue,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}
@Composable
fun DragSensitivity2Slider() {
var currentValue by remember { mutableStateOf(20f) }
FilledSlider(
modifier = Modifier.size(50.dp, 150.dp),
sliderColor = SliderColor(
enabledTrackColor = Color(0xFFC6B8FF),
enabledIndicationColor = Color(0xFF7D5FFF)
),
currentValue = currentValue,
dragSensitivity = 1f,
valueRange = 0f..100f,
setCurrentValue = {
currentValue = it
}
)
}- Support it by making star⭐!
You can see stargazers here. - Also, follow me on GitHub for further updates
Designed and developed by 2023 seyoungcho2 (Seyoung Cho)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.