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

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Slider

> A Slider allows users to select a value (or a range of values) from a predefined scale by moving a handle along a track. It's ideal for adjusting settings or selecting approximate values quickly and visually.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-slider--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--default&viewMode=story&globals=theme:light" title="Slider default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* When users need to adjust a value within a continuous range, such as volume, brightness, or price filters.
* When the exact value isn't critical and can be fine-tuned visually.
* When providing immediate visual feedback is beneficial (e.g., media scrubbing, live previews).
* For range selections, where users specify a minimum and maximum (e.g., numerical-based filters).

## When to use something else

* Precise numeric entry: use [Input](/cdf/aura/primitives/input) or [Select](/cdf/aura/primitives/select).
* Categorical labels ("Low / Medium / High"): use [Radio](/cdf/aura/primitives/radio) or [Select](/cdf/aura/primitives/select).

## Behavior

Feedback:
Interaction with the Slider can either be immediate or deferred upon user submission. Consider live feedback of a Slider if the effect is visual, especially for settings like opacity, brightness, font size or when media scrubbing.

Deferred feedback:
When using a Slider to adjust filters or non-visual settings, consider the impact of immediate updates on the user experience. If changes trigger screen reloads or cause noticeable visual shifts, it can feel disruptive or frustrating, especially if performance isn't smooth. In these cases, it may be better to let users make their adjustments first and then apply the changes only after they click "Submit" or "Apply".

When using deferred feedback, make sure to add help text or somehow indicate a user must hit submit in order to see the changes.

## Often used with

[Label](/cdf/aura/primitives/label), [Helper text](/cdf/aura/primitives/helper-text); optional numeric [Input](/cdf/aura/primitives/input) beside the track for exact values; live preview regions when adjusting visuals.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Single value

Use a single-value slider when users need to pick one point on a scale—for example, volume, opacity, or a price ceiling.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--single-value" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--single-value&viewMode=story&globals=theme:light" title="Slider single value story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Range slider

Use a range slider when users need to specify a minimum and maximum—for example, filtering by a numeric range or setting start and end dates on a timeline.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--range-slider" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--range-slider&viewMode=story&globals=theme:light" title="Slider range slider story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With input

Pair a slider with a numeric input when users need both quick visual adjustment and precise entry—for example, setting an exact percentage alongside a rough drag.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--with-input" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--with-input&viewMode=story&globals=theme:light" title="Slider with input story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Disabled

Use a disabled slider when the value cannot be changed, and explain why in helper text or a tooltip so users know what must happen before they can adjust the setting.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--disabled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--disabled&viewMode=story&globals=theme:light" title="Slider disabled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Vertical

Use a vertical slider when horizontal space is limited—for example, in a side panel or alongside a canvas where a tall track fits the layout better.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--vertical" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--vertical&viewMode=story&globals=theme:light" title="Slider vertical story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Step increments

Use step increments when values must snap to defined intervals—for example, rating scales, percentage steps, or settings that only allow whole numbers.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--step-increments" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--step-increments&viewMode=story&globals=theme:light" title="Slider step increments story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Controlled

Use a controlled slider when the value must sync with application state—for example, live previews, URL parameters, or coordinated updates across multiple controls.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-slider--controlled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-slider--controlled&viewMode=story&globals=theme:light" title="Slider controlled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>