Slider - Cognite Docs

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 or Select.
Categorical labels (“Low / Medium / High”): use Radio or 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, Helper text; optional numeric 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.

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.

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.

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.

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.

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.

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.

​When to use

​When to use something else

​Behavior

​Often used with

​Visual examples

​Single value

​Range slider

​With input

​Disabled

​Vertical

​Step increments

​Controlled