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

Track

RdxSliderTrackComponent

Range

RdxSliderRangeComponent

Thumb

RdxSliderThumbComponent

Accessibility

Adheres to the Slider WAI-ARIA design pattern.

Radix Angular

Slider

Features

Anatomy

API Reference

Root

Track

Range

Thumb

Accessibility

Keyboard Interactions