Skip to content

Commit

Permalink
feat(slider): added styleClass, updated docs and move emits to signals
Browse files Browse the repository at this point in the history
  • Loading branch information
@pimenovoleg
pimenovoleg committed Jan 10, 2025
1 parent 7c89b96 commit 439b594
Show file tree
Hide file tree
Showing 11 changed files with 306 additions and 42 deletions.
126 changes: 125 additions & 1 deletion apps/radix-docs/src/api-doc/primitives.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -948,7 +948,131 @@
"components": {}
},
"slider-root.component": {
"components": {}
"components": {
"RdxSliderRootComponent": {
"description": "",
"props": {
"description": "Defines the input properties of the component.",
"values": [
{
"name": "min",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<number, NumberInput>",
"default": "0",
"defaultValue": "0",
"description": "The minimum value for the range."
},
{
"name": "max",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<number, NumberInput>",
"default": "100",
"defaultValue": "100",
"description": "The maximum value for the range."
},
{
"name": "step",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<number, NumberInput>",
"default": "1",
"defaultValue": "1",
"description": "The stepping interval."
},
{
"name": "minStepsBetweenThumbs",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<number, NumberInput>",
"default": "0",
"defaultValue": "0",
"description": "The minimum permitted steps between multiple thumbs."
},
{
"name": "orientation",
"optional": false,
"readonly": true,
"type": "InputSignal<\"horizontal\" | \"vertical\">",
"default": "'horizontal'",
"defaultValue": "'horizontal'",
"description": "The orientation of the slider."
},
{
"name": "disabled",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<boolean, BooleanInput>",
"default": "false",
"defaultValue": "false",
"description": "When true, prevents the user from interacting with the slider."
},
{
"name": "inverted",
"optional": false,
"readonly": true,
"type": "InputSignalWithTransform<boolean, BooleanInput>",
"default": "false",
"defaultValue": "false",
"description": "Whether the slider is visually inverted."
},
{
"name": "dir",
"optional": false,
"readonly": true,
"type": "InputSignal<\"ltr\" | \"rtl\">",
"default": "'ltr'",
"defaultValue": "'ltr'",
"description": "The reading direction of the combobox when applicable."
},
{
"name": "styleClass",
"optional": false,
"readonly": true,
"type": "InputSignal<undefined | string>",
"default": "...",
"defaultValue": "...",
"description": "Style class of the component."
},
{
"name": "modelValue",
"optional": false,
"readonly": true,
"type": "ModelSignal<number[]>",
"default": "...",
"defaultValue": "...",
"description": "The controlled value of the slider."
}
]
},
"emits": {
"description": "Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.",
"values": [
{
"name": "valueChange",
"parameters": [
{
"name": "value",
"type": "number[]"
}
],
"description": "Event handler called when the slider value changes."
},
{
"name": "valueCommit",
"parameters": [
{
"name": "value",
"type": "number[]"
}
],
"description": "Event handler called when the value changes at the end of an interaction.\n\nUseful when you only need to capture a final value e.g. to update a backend service."
}
]
}
}
}
},
"slider-thumb-impl.directive": {
"components": {}
Expand Down
72 changes: 72 additions & 0 deletions apps/radix-docs/src/content/primitives/components/slider.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,91 @@ description: .
### Root
`RdxSliderRootComponent`

<PropsTable name="RdxSliderRootComponent" />

<EmitsTable name="RdxSliderRootComponent" />

<DataAttributesTable attributes={[
{ name: '[data-disabled]', value: 'Present when disabled' },
{ name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Track
`RdxSliderTrackComponent`

The track that contains the `SliderRange`.

<DataAttributesTable attributes={[
{ name: '[data-disabled]', value: 'Present when disabled' },
{ name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Range
`RdxSliderRangeComponent`

The range part. Must live inside `SliderTrack`.


<DataAttributesTable attributes={[
{ name: '[data-disabled]', value: 'Present when disabled' },
{ name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Thumb
`RdxSliderThumbComponent`

A draggable thumb. You can render multiple thumbs.


<DataAttributesTable attributes={[
{ name: '[data-disabled]', value: 'Present when disabled' },
{ name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

## Accessibility
Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb).

### Keyboard Interactions

<KeyboardTable attributes={[
{
key: 'Home',
description: 'Sets the value to its minimum.',
},
{
key: 'End',
description: 'Sets the value to its maximum.',
},
{
key: 'PageDown',
description: ' Decreases the value by a larger step.',
},
{
key: 'PageUP',
description: ' Increases the value by a larger step.',
},
{
key: 'ArrowDown',
description: ' Decreases the value by the step amount.',
},
{
key: 'ArrowRight',
description: 'Increments/decrements by the step value depending on orientation.',
},
{
key: 'ArrowUp',
description: ' Increases the value by the step amount.',
},
{
key: 'ArrowLeft',
description: ' Increments/decrements by the step value depending on orientation. ',
},
{
key: 'Shift + ArrowUp',
description: ' Increases the value by a larger step.',
},
{
key: 'Shift + ArrowDown',
description: ' Decreases the value by a larger step.',
}
]} />
15 changes: 7 additions & 8 deletions packages/primitives/slider/src/slider-horizontal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import {
booleanAttribute,
Component,
ElementRef,
EventEmitter,
inject,
input,
Input,
Output,
output,
signal,
viewChild
} from '@angular/core';
Expand Down Expand Up @@ -48,12 +47,12 @@ export class RdxSliderHorizontalComponent {

@Input() className = '';

@Output() slideStart = new EventEmitter<number>();
@Output() slideMove = new EventEmitter<number>();
@Output() slideEnd = new EventEmitter<void>();
@Output() stepKeyDown = new EventEmitter<{ event: KeyboardEvent; direction: number }>();
@Output() endKeyDown = new EventEmitter<KeyboardEvent>();
@Output() homeKeyDown = new EventEmitter<KeyboardEvent>();
readonly slideStart = output<number>();
readonly slideMove = output<number>();
readonly slideEnd = output<void>();
readonly stepKeyDown = output<{ event: KeyboardEvent; direction: number }>();
readonly endKeyDown = output<KeyboardEvent>();
readonly homeKeyDown = output<KeyboardEvent>();

private readonly sliderElement = viewChild<ElementRef>('sliderElement');

Expand Down
15 changes: 7 additions & 8 deletions packages/primitives/slider/src/slider-impl.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Directive, EventEmitter, inject, Output } from '@angular/core';
import { Directive, inject, output } from '@angular/core';
import { RdxSliderRootComponent } from './slider-root.component';
import { ARROW_KEYS, PAGE_KEYS } from './utils';

@Directive({
selector: '[rdxSliderImpl]',
standalone: true,
host: {
role: 'slider',
tabindex: '0',
Expand All @@ -17,12 +16,12 @@ import { ARROW_KEYS, PAGE_KEYS } from './utils';
export class RdxSliderImplDirective {
protected readonly rootContext = inject(RdxSliderRootComponent);

@Output() slideStart = new EventEmitter<PointerEvent>();
@Output() slideMove = new EventEmitter<PointerEvent>();
@Output() slideEnd = new EventEmitter<PointerEvent>();
@Output() homeKeyDown = new EventEmitter<KeyboardEvent>();
@Output() endKeyDown = new EventEmitter<KeyboardEvent>();
@Output() stepKeyDown = new EventEmitter<KeyboardEvent>();
readonly slideStart = output<PointerEvent>();
readonly slideMove = output<PointerEvent>();
readonly slideEnd = output<PointerEvent>();
readonly homeKeyDown = output<KeyboardEvent>();
readonly endKeyDown = output<KeyboardEvent>();
readonly stepKeyDown = output<KeyboardEvent>();

onKeyDown(event: KeyboardEvent) {
if (event.key === 'Home') {
Expand Down
1 change: 0 additions & 1 deletion packages/primitives/slider/src/slider-range.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { convertValueToPercentage } from './utils';

@Component({
selector: 'rdx-slider-range',
standalone: true,
host: {
'[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
'[attr.data-orientation]': 'rootContext.orientation()',
Expand Down
Loading

0 comments on commit 439b594

Please sign in to comment.