Skip to content

Instantly share code, notes, and snippets.

@Debdutta-Panda
Created July 19, 2022 16:33
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Debdutta-Panda/d47a84b3e2f82b4dd4b1f0cf131e73d8 to your computer and use it in GitHub Desktop.
Save Debdutta-Panda/d47a84b3e2f82b4dd4b1f0cf131e73d8 to your computer and use it in GitHub Desktop.
Jetpack Compose Vertical Slider
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.layout
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.dp
import com.debduttapanda.verticalslider.ui.theme.VerticalSliderTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
VerticalSliderTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column {
var value by remember { mutableStateOf(0f) }
VerticalSlider(
value = value,
onValueChange = {
value = it
},
modifier = Modifier
.width(200.dp)
.height(50.dp)
.background(Color(0xffdedede))
)
Spacer(modifier = Modifier.height(50.dp))
Slider(
value = value,
onValueChange = {
value = it
},
modifier = Modifier
.width(200.dp)
.height(50.dp)
.background(Color(0xffdedede))
)
}
}
}
}
}
}
@Composable
fun VerticalSlider(
value: Float,
onValueChange: (Float) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
/*@IntRange(from = 0)*/
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: SliderColors = SliderDefaults.colors()
){
Slider(
colors = colors,
interactionSource = interactionSource,
onValueChangeFinished = onValueChangeFinished,
steps = steps,
valueRange = valueRange,
enabled = enabled,
value = value,
onValueChange = onValueChange,
modifier = Modifier
.graphicsLayer {
rotationZ = 270f
transformOrigin = TransformOrigin(0f, 0f)
}
.layout { measurable, constraints ->
val placeable = measurable.measure(
Constraints(
minWidth = constraints.minHeight,
maxWidth = constraints.maxHeight,
minHeight = constraints.minWidth,
maxHeight = constraints.maxHeight,
)
)
layout(placeable.height, placeable.width) {
placeable.place(-placeable.width, 0)
}
}
.then(modifier)
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment