---
title: Slider
description: An input where the user selects a value from within a given range.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/slider"

templ SliderDemo() {
	@slider.Slider(slider.Props{
		Value: []float64{75},
		Max:    100,
		Step:   1,
		Class:  "mx-auto w-full max-w-xs",
	})
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add slider
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="slider" title="components/slider/slider.templ" />

<ComponentSource name="slider" title="components/slider/slider.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/slider"
```

```templ showLineNumbers
@slider.Slider(slider.Props{Value: []float64{33}, Max: 100, Step: 1})
```

## Range

Use an array with two values for a range slider.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/slider"

templ SliderRange() {
	@slider.Slider(slider.Props{
		Value: []float64{25, 50},
		Max:    100,
		Step:   5,
		Class:  "mx-auto w-full max-w-xs",
	})
}
```

## Multiple Thumbs

Use an array with multiple values for multiple thumbs.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/slider"

templ SliderMultiple() {
	@slider.Slider(slider.Props{
		Value: []float64{10, 20, 70},
		Max:    100,
		Step:   10,
		Class:  "mx-auto w-full max-w-xs",
	})
}
```

## Vertical

Use `Orientation: slider.OrientationVertical` for a vertical slider.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/slider"

templ SliderVertical() {
	<div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
		@slider.Slider(slider.Props{
			Value:      []float64{50},
			Max:         100,
			Step:        1,
			Orientation: slider.OrientationVertical,
			Class:       "h-40",
		})
		@slider.Slider(slider.Props{
			Value:      []float64{25},
			Max:         100,
			Step:        1,
			Orientation: slider.OrientationVertical,
			Class:       "h-40",
		})
	</div>
}
```

## Controlled

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/label"
	"github.com/axadrn/shadcn-templ/v2/components/slider"
)

templ SliderControlled() {
	<div class="mx-auto grid w-full max-w-xs gap-3" data-slider-controlled-demo>
		<div class="flex items-center justify-between gap-2">
			@label.Label(label.Props{For: "slider-demo-temperature"}) {
				Temperature
			}
			<span class="text-sm text-muted-foreground" data-value>0.3, 0.7</span>
		</div>
		@slider.Slider(slider.Props{
			ID:     "slider-demo-temperature",
			Value: []float64{0.3, 0.7},
			Min:    0,
			Max:    1,
			Step:   0.1,
		})
	</div>
	<script>
		// The vanilla pendant of the demo's React state.
		(() => {
			const demo = document.querySelector("[data-slider-controlled-demo]");
			demo.addEventListener("slider-change", (e) => {
				demo.querySelector("[data-value]").textContent = e.detail.values.join(", ");
			});
		})();
	</script>
}
```

## Disabled

Use the `Disabled` prop to disable the slider.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/slider"

templ SliderDisabled() {
	@slider.Slider(slider.Props{
		Value:   []float64{50},
		Max:      100,
		Step:     1,
		Disabled: true,
		Class:    "mx-auto w-full max-w-xs",
	})
}
```

## API Reference

### Slider

The `Slider` component renders one draggable thumb per value on a shared track.

| Prop          | Type                                             | Default                 |
| ------------- | ------------------------------------------------ | ----------------------- |
| `Value`      | `[]float64`                                      | `[Min, Max]`            |
| `Min`         | `float64`                                        | `0`                     |
| `Max`         | `float64`                                        | `100`                   |
| `Step`        | `float64`                                        | `1`                     |
| `Orientation` | `OrientationHorizontal \| OrientationVertical`   | `OrientationHorizontal` |
| `Name`        | `string`                                         | -                       |
| `Disabled`    | `bool`                                           | `false`                 |
| `Class`       | `string`                                         | -                       |