slider

1import { DOCUMENT } from '@angular/common';
2import {
3  type AfterViewInit,
4  booleanAttribute,
5  ChangeDetectionStrategy,
6  Component,
7  computed,
8  DestroyRef,
9  ElementRef,
10  forwardRef,
11  inject,
12  input,
13  linkedSignal,
14  numberAttribute,
15  output,
16  signal,
17  viewChild,
18  viewChildren,
19  ViewEncapsulation,
20} from '@angular/core';
21import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
22import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
23 
24import type { ClassValue } from 'clsx';
25import { filter, fromEvent, map, switchMap, takeUntil, tap } from 'rxjs';
26 
27import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
28import { clamp, convertValueToPercentage, roundToStep } from '@/shared/utils/number';
29 
30import {
31  sliderOrientationVariants,
32  sliderRangeVariants,
33  sliderThumbVariants,
34  sliderTrackVariants,
35  sliderVariants,
36} from './slider.variants';
37 
38type OnTouchedType = () => void;
39type OnChangeType = (value: number[]) => void;
40 
41@Component({
42  selector: 'z-slider-track',
43  template: `
44    <span #track data-slot="slider-track" [attr.data-orientation]="orientation()" [class]="classes()">
45      <ng-content />
46    </span>
47  `,
48  changeDetection: ChangeDetectionStrategy.OnPush,
49  encapsulation: ViewEncapsulation.None,
50  host: {
51    '[style.width]': '"inherit"',
52    '[style.height]': '"100%"',
53    '[attr.data-orientation]': 'orientation()',
54  },
55})
56export class ZSliderTrackComponent {
57  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
58  readonly class = input<ClassValue>('');
59 
60  protected readonly classes = computed(() => mergeClasses(sliderTrackVariants(), 'flex', this.class()));
61 
62  private readonly trackEl = viewChild.required<ElementRef<HTMLElement>>('track');
63 
64  get nativeElement(): HTMLElement {
65    return this.trackEl().nativeElement;
66  }
67}
68 
69@Component({
70  selector: 'z-slider-range',
71  template: `
72    @for (seg of segments(); track $index) {
73      <span
74        data-slot="slider-range"
75        [attr.data-orientation]="orientation()"
76        [class]="classes()"
77        [style.left]="seg.left"
78        [style.right]="seg.right"
79        [style.bottom]="seg.bottom"
80        [style.top]="seg.top"
81      ></span>
82    }
83  `,
84  changeDetection: ChangeDetectionStrategy.OnPush,
85  encapsulation: ViewEncapsulation.None,
86})
87export class ZSliderRangeComponent {
88  readonly percent = input<number[]>([0]);
89 
90  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
91// … truncated