Slider

An input where the user selects a value from within a given range.

 import { Component } from '@angular/core';
 
import { RdxSliderModule } from '@radix-ng/primitives/slider';
 
@Component({
    selector: 'radix-slider-demo',
    standalone: true,
    imports: [RdxSliderModule],
    styleUrl: 'slider-demo.css',
    template: `
        <rdx-slider [modelValue]="[45]" [step]="5" className="SliderRoot" style="display: flex; width: 200px;">
            <rdx-slider-track class="SliderTrack">
                <rdx-slider-range class="SliderRange" />
            </rdx-slider-track>
            <rdx-slider-thumb class="SliderThumb" />
        </rdx-slider>
    `
})
export class SliderDemoComponent {}

 .SliderRoot {
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    touch-action: none;
    width: 200px;
    height: 20px;
}
 
.SliderTrack {
    background-color: var(--black-a10);
    position: relative;
    flex-grow: 1;
    border-radius: 9999px;
    height: 3px;
}
 
.SliderRange {
    position: absolute;
    background-color: white;
    border-radius: 9999px;
    height: 100%;
}
 
.SliderThumb {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;
    box-shadow: 0 2px 10px var(--black-a7);
    border-radius: 10px;
}
 
.SliderThumb:hover {
    background-color: var(--violet-3);
}
 
.SliderThumb:focus {
    outline: none;
    box-shadow: 0 0 0 5px var(--black-a8);
}

Features

Can be controlled or uncontrolled.
Supports multiple thumbs.
Supports a minimum value between thumbs.
Supports touch or click on track to update value.
Supports Right to Left direction.
Full keyboard navigation.

Anatomy

 <rdx-slider>
    <rdx-slider-track>
        <rdx-slider-range />
    </rdx-slider-track>
    <rdx-slider-thumb />
</rdx-slider>

API Reference

Root

RdxSliderRootComponent

Prop	Default	Type
`min`	`0`	`InputSignalWithTransform<number, NumberInput>` The minimum value for the range.
`max`	`100`	`InputSignalWithTransform<number, NumberInput>` The maximum value for the range.
`step`	`1`	`InputSignalWithTransform<number, NumberInput>` The stepping interval.
`minStepsBetweenThumbs`	`0`	`InputSignalWithTransform<number, NumberInput>` The minimum permitted steps between multiple thumbs.
`orientation`	`'horizontal'`	`InputSignal<"horizontal" \| "vertical">` The orientation of the slider.
`disabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` When true, prevents the user from interacting with the slider.
`inverted`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether the slider is visually inverted.
`dir`	`'ltr'`	`InputSignal<"ltr" \| "rtl">` The reading direction of the combobox when applicable.
`styleClass`	`—`	`InputSignal<undefined \| string>` Style class of the component.
`modelValue`	`—`	`ModelSignal<number[]>` The controlled value of the slider.

Emit	Payload
`valueChange`	`[value: number[]]` Event handler called when the slider value changes.
`valueCommit`	`[value: number[]]` Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.

Data Attribute	Value
`[data-disabled]`	`Present when disabled`
`[data-orientation]`	`"vertical" \| "horizontal"`

Track

RdxSliderTrackComponent

The track that contains the SliderRange .

Data Attribute	Value
`[data-disabled]`	`Present when disabled`
`[data-orientation]`	`"vertical" \| "horizontal"`

Range

RdxSliderRangeComponent

The range part. Must live inside SliderTrack .

Data Attribute	Value
`[data-disabled]`	`Present when disabled`
`[data-orientation]`	`"vertical" \| "horizontal"`

Thumb

RdxSliderThumbComponent

A draggable thumb. You can render multiple thumbs.

Data Attribute	Value
`[data-disabled]`	`Present when disabled`
`[data-orientation]`	`"vertical" \| "horizontal"`

Accessibility

Adheres to the Slider WAI-ARIA design pattern .

Keyboard Interactions

Key	Description
`Home`	Sets the value to its minimum.
`End`	Sets the value to its maximum.
`PageDown`	Decreases the value by a larger step.
`PageUP`	Increases the value by a larger step.
`ArrowDown`	Decreases the value by the step amount.
`ArrowRight`	Increments/decrements by the step value depending on orientation.
`ArrowUp`	Increases the value by the step amount.
`ArrowLeft`	Increments/decrements by the step value depending on orientation.
`Shift + ArrowUp`	Increases the value by a larger step.
`Shift + ArrowDown`	Decreases the value by a larger step.