Slider

Range input primitive with single, range, multiple thumb, vertical, controlled, RTL, and reactive forms support.

Preview

Volume

Set a comfortable playback level for preview audio.

Usage

import { FrSliderModule } from '@frame-ui-ng/components/slider';

HTML

<frame-slider [defaultValue]="42" aria-label="Volume" />

Examples

Basic

Use a slider when a setting benefits from quick spatial adjustment inside a bounded range.

Volume

Set a comfortable playback level for preview audio.

Range

Pass two values to create a range selection with a highlighted segment between both thumbs.

Budget window

Limit recommendations to a practical monthly spend range.

Multiple Thumbs

Use more than two values when users need several checkpoints on the same scale.

Review checkpoints

Place several milestones along a single release timeline.

Vertical

Set orientation to vertical for compact panels, mixers, or side controls.

Light level

Vertical orientation works well for compact tool panels.

Controlled

Bind value and valueChange when parent state should own the current slider value.

Temperature

48% creativity applied to generated suggestions.

Disabled

Disable the slider when a value is locked by permissions, policy, or another field.

Locked capacity

This setting is managed by the workspace policy.

Reactive Forms

Use the slider as a ControlValueAccessor with validators, touched state, and Field error messaging.

RTL

Horizontal sliders follow the document direction and keep thumb positioning logical in RTL layouts.

كثافة العرض

يتبع المؤشر اتجاه النص والمنطق المكاني للواجهة.

Custom Styling

Override slider tokens on the slider or an ancestor to tune track color, range treatment, thumb size, focus ring, and disabled opacity.

Accent strength

Local tokens can make a slider feel more branded or more quiet.

Token Inspector

Hover the slider surface, label, description, or slider root to inspect the tokens that control track, range, thumb, and focus treatment.

Upload limit

Inspect the track, range, and thumb tokens.

Design Tokens

Use these CSS custom properties to tune slider dimensions, track, range, thumb, radius, focus ring, and disabled opacity.

SCSS

--frame-slider-width: 100%;
--frame-slider-height: 1.25rem;
--frame-slider-vertical-width: 1.25rem;
--frame-slider-vertical-height: 12rem;
--frame-slider-track-size: 0.5rem;
--frame-slider-track-bg: var(--frame-muted, #f4f4f5);
--frame-slider-range-bg: var(--frame-primary, #18181b);
--frame-slider-thumb-size: 1.25rem;
--frame-slider-thumb-bg: var(--frame-background, #fff);
--frame-slider-thumb-border: var(--frame-primary, #18181b);
--frame-slider-thumb-border-width: 2px;
--frame-slider-thumb-shadow: 0 2px 10px rgb(0 0 0 / 0.16);
--frame-slider-thumb-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--frame-ring, #18181b) 24%, transparent);
--frame-slider-disabled-opacity: 0.5;
--frame-slider-radius: 999px;