> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> A range input for selecting one or more numeric values along a track.

```tsx theme={null}
import { Slider } from "@fanvue/ui";
import type { SliderLabelPosition, SliderProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-slider--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Slider — Default" />
</Frame>

```tsx theme={null}
import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[50]}
  label="Label"
  minLabel="Min Value"
  maxLabel="Max Value"
/>
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-slider--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Slider — Disabled" />
</Frame>

```tsx theme={null}
import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[50]}
  label="Disabled Slider"
  minLabel="Min"
  maxLabel="Max"
  disabled
/>
```

## No Labels

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-slider--no-labels&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Slider — No Labels" />
</Frame>

```tsx theme={null}
import { Slider } from "@fanvue/ui";

<Slider defaultValue={[50]} />
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-slider--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Slider — All Variants" />
</Frame>

```tsx theme={null}
import { Slider } from "@fanvue/ui";

<div className="flex w-[360px] flex-col gap-8">
  <Slider
    defaultValue={[40]}
    label="Label top"
    labelPosition="top"
    minLabel="0"
    maxLabel="100"
  />
  <Slider
    defaultValue={[40]}
    label="Label left"
    labelPosition="left"
    minLabel="0"
    maxLabel="100"
  />
  <Slider defaultValue={[60]} label="Label left, no min/max" labelPosition="left" />
  <Slider defaultValue={[30]} minLabel="Low" maxLabel="High" />
  <Slider defaultValue={[50]} />
  <Slider defaultValue={[20, 80]} label="Range" minLabel="$0" maxLabel="$1000" />
  <Slider defaultValue={[50]} label="Disabled" minLabel="Min" maxLabel="Max" disabled />
</div>
```

## Range

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-slider--range&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Slider — Range" />
</Frame>

```tsx theme={null}
import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[20, 80]}
  label="Price Range"
  minLabel="$0"
  maxLabel="$1000"
/>
```

## Props

## Slider

A range input for selecting one or more numeric values along a track. Supports single and multi-thumb modes, optional labels, and a value tooltip.

Built on Radix UI `Slider`.

<ParamField path="formatTooltip" type="((value: number) => string)">
  Custom formatter for the tooltip value (e.g. to add units or format numbers).
</ParamField>

<ParamField path="label" type="string">
  Label text displayed alongside the slider.
</ParamField>

<ParamField path="labelPosition" type="&#x22;top&#x22; | &#x22;left&#x22;" default="top">
  Position of the label relative to the slider track.
</ParamField>

<ParamField path="maxLabel" type="string">
  Text shown at the maximum end of the track.
</ParamField>

<ParamField path="minLabel" type="string">
  Text shown at the minimum end of the track.
</ParamField>

<ParamField path="showTooltip" type="boolean" default="false">
  Whether to show a tooltip with the current value above the thumb.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `SliderLabelPosition`, `SliderProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)