diff --git a/src/assets/sliders/slider-header-material-3.png b/src/assets/sliders/slider-header-material-3.png
new file mode 100644
index 0000000..c213182
Binary files /dev/null and b/src/assets/sliders/slider-header-material-3.png differ
diff --git a/src/assets/sliders/slider-header-material.png b/src/assets/sliders/slider-header-material.png
new file mode 100644
index 0000000..bdf49f5
Binary files /dev/null and b/src/assets/sliders/slider-header-material.png differ
diff --git a/src/content/docs/sliders/slider.md b/src/content/docs/sliders/slider.md
deleted file mode 100644
index 9c403b9..0000000
--- a/src/content/docs/sliders/slider.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Slider
-description: A guide in my new Starlight docs site.
----
\ No newline at end of file
diff --git a/src/content/docs/sliders/slider.mdx b/src/content/docs/sliders/slider.mdx
new file mode 100644
index 0000000..7532cca
--- /dev/null
+++ b/src/content/docs/sliders/slider.mdx
@@ -0,0 +1,148 @@
+---
+title: slider
+description: Aprende a usar el composable slider en Jetpack Compose.
+sidebar:
+ order: 0
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+[comment]: <> (La ruta siempre será assets/nombeComponente/componente-header.webp)
+
+| Material| Material 3|
+| :----------------: | :------: |
+|  |  |
+
+Los `slider` es un componente que permite al usuario seleccionar un valor continuo entre dos extremos. El valor seleccionado se puede usar para controlar una función en la aplicación.
+
+## Implementación
+
+### Definición del componente
+
+[comment]: <> (Añade un ``TabItem`` por cada tipo de implementación que tenga)
+
+
+
+
+```kotlin frame="terminal"
+@Composable
+fun Slider(
+ value: Float,
+ onValueChange: (Float) -> Unit,
+ modifier: Modifier = Modifier,
+ enabled: Boolean = true,
+ valueRange: ClosedFloatingPointRange = 0f..1f,
+ steps: Int = 0,
+ onDragStarted: () -> Unit = {},
+ onDragStopped: () -> Unit = {},
+ colors: SliderColors = SliderDefaults.colors(),
+ trackShape: Shape = SliderDefaults.trackShape,
+ thumbShape: Shape = SliderDefaults.thumbShape,
+ tickShape: Shape = SliderDefaults.tickShape,
+ tickPositions: List = emptyList(),
+ tickLabelFormatter: (Float) -> String = { it.toString() },
+ label: @Composable (Float) -> Unit = {},
+)
+```
+Atributo | Descripción
+------ | -----------
+value | Valor actual del slider.
+onValueChange | Función lambda que se ejecutará cuando el usuario cambie el valor del slider.
+modifier | Modificador que implementará el composable.
+enabled | Habilita o deshabilita el slider.
+valueRange | Rango de valores que el usuario puede seleccionar.
+steps | Número de pasos discretos en los que se puede mover el slider.
+onDragStarted | Función lambda que se ejecutará cuando el usuario comience a arrastrar el thumb del slider.
+onDragStopped | Función lambda que se ejecutará cuando el usuario detenga el arrastre del thumb del slider.
+colors | Permite modificar los colores del slider.
+trackShape | Define la forma de la pista del slider.
+thumbShape | Define la forma del thumb del slider.
+tickShape | Define la forma de las marcas del slider.
+tickPositions | Lista de posiciones de las marcas del slider.
+tickLabelFormatter | Función lambda que formatea el texto de las marcas del slider.
+label | Función lambda que muestra una etiqueta junto al slider.
+
+
+
+```kotlin frame="terminal"
+@Composable
+fun Slider(
+ value: Float,
+ onValueChange: (Float) -> Unit,
+ modifier: Modifier = Modifier,
+ enabled: Boolean = true,
+ valueRange: ClosedFloatingPointRange = 0f..1f,
+ steps: Int = 0,
+ onDragStarted: () -> Unit = {},
+ onDragStopped: () -> Unit = {},
+ colors: SliderColors = SliderDefaults.colors(),
+ trackShape: Shape = SliderDefaults.trackShape,
+ thumbShape: Shape = SliderDefaults.thumbShape,
+ tickShape: Shape = SliderDefaults.tickShape,
+ tickPositions: List = emptyList(),
+ tickLabelFormatter: (Float) -> String = { it.toString() },
+ label: @Composable (Float) -> Unit = {},
+)
+```
+
+Atributo | Descripción
+------ | -----------
+value | Valor actual del slider.
+onValueChange | Función lambda que se ejecutará cuando el usuario cambie el valor del slider.
+modifier | Modificador que implementará el composable.
+enabled | Habilita o deshabilita el slider.
+valueRange | Rango de valores que el usuario puede seleccionar.
+steps | Número de pasos discretos en los que se puede mover el slider.
+onDragStarted | Función lambda que se ejecutará cuando el usuario comience a arrastrar el thumb del slider.
+onDragStopped | Función lambda que se ejecutará cuando el usuario detenga el arrastre del thumb del slider.
+colors | Permite modificar los colores del slider.
+trackShape | Define la forma de la pista del slider.
+thumbShape | Define la forma del thumb del slider.
+tickShape | Define la forma de
+
+
+
+
+[comment]: <> (No modifiques el tip)
+
+:::tip[Fuente]
+Puedes acceder a la documentación oficial de Google
+[desde aquí](https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary).
+:::
+
+### Ejemplos
+
+
+
+
+
+
+```kotlin frame="terminal"
+@Composable
+fun SliderExample() {
+ var sliderValue by remember { mutableStateOf(0.5f) }
+ Slider(
+ value = sliderValue,
+ onValueChange = { sliderValue = it },
+ )
+}
+```
+
+
+
+
+
+
+```kotlin frame="terminal"
+@Composable
+fun SliderExample() {
+ var sliderValue by remember { mutableStateOf(0.5f) }
+
+ Slider(
+ value = sliderValue,
+ onValueChange = { sliderValue = it },
+ )
+}
+```
+
+