Range Slider

import { AXRangeSliderModule } from '@acorex/components/range-slider';

Range Slider component that offers smooth dragging functionality, configurable minimum and maximum values, and real-time value updates. It allows for seamless integration into applications where users need to select a value within a specific range, with full control over its appearance and behavior.

Overview

In this section, you can test different options of this component and see the output in real time

-50

-40

-30

-20

-10

Color

Primary

Mode

Dual

Orientation

Horizontal

Step

Snap

Min

Max

Snap Mode

Start

has Step

has Snap

has Lable

has Tooltip

Readonly

Disabled

Value: undefined

Usage

A simple example of using ax-range-slider

Preview

Code

Vertical

The simple vertical range slider.

Preview

Code

Music Player

A Simple Music Player.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-range-slider-size	0.25rem	Size (thickness) of the range slider bar and related elements.
--ax-comp-range-slider-line-color	var(--ax-sys-color-#{$name}-lighter-surface)	Line color of the range slider bar. Uses the specified theme color (primary, success, danger, warning, or secondary) at its 200 shade in the solid variants.
--ax-comp-range-slider-color	var(--ax-sys-color-#{$name}-surface)	Color of the range slider, used for the highlight and handler. Uses the specified theme color (primary, success, danger, warning, or secondary) at its 500 shade in the solid variants.
--ax-comp-range-slider-tooltip-text-color	var(--ax-sys-color-on-#{$name}-surface)	Text color of the range slider tooltip. Uses the corresponding text color of the specified theme color (primary, success, danger, warning, or secondary) in the solid variants.
--ax-comp-range-slider-ring-color	var(--ax-comp-range-slider-color), 0.25	Ring color when you hover the handler.