---
title: Slider
description: Sliders for continuous values, stepped ranges, and vertical controls.
---

Use sliders when people need to adjust a value across a bounded range.

<UiDemo id="slider" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Slider.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Vertical

<UiDemo id="slider-vertical" />

### Disabled

<UiDemo id="slider-disabled" />

### Stepped

<UiDemo id="slider-steps" />

## API Reference

### Slider

A slider for selecting a value from a bounded range.

```kotlin
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    orientation: Orientation = Orientation.Horizontal,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `value` | `Float` | Current value shown by the slider. |
| `onValueChange` | `(Float) -> Unit` | Called when the slider value changes. |
| `modifier` | `Modifier` | Modifier applied to the slider. |
| `enabled` | `Boolean` | Whether the slider can be interacted with. |
| `valueRange` | `ClosedFloatingPointRange<Float>` | Minimum and maximum values allowed by the slider. |
| `steps` | `Int` | Number of discrete steps between the range endpoints. |
| `orientation` | `Orientation` | Whether the slider is laid out horizontally or vertically. |
| `onValueChangeFinished` | `(() -> Unit)?` | Called when a drag or input interaction finishes. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus, drag, and press state. |