Slider

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

Loading...
 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.