feat(slider): Add the ticks variant

AmadeusITGroup · Feb 25, 2025 · 7fa36d6 · 7fa36d6
1 parent 915f6cf
commit 7fa36d6
Show file tree

Hide file tree

Showing 34 changed files with 2,054 additions and 50 deletions.
diff --git a/angular/bootstrap/src/agnos-ui-angular.module.ts b/angular/bootstrap/src/agnos-ui-angular.module.ts
@@ -29,7 +29,13 @@ import {
 	AccordionBodyDirective,
 	AccordionItemStructureDirective,
 } from './components/accordion/accordion.component';
-import {SliderComponent, SliderHandleDirective, SliderLabelDirective, SliderStructureDirective} from './components/slider/slider.component';
+import {
+	SliderComponent,
+	SliderHandleDirective,
+	SliderLabelDirective,
+	SliderStructureDirective,
+	SliderTickDirective,
+} from './components/slider/slider.component';
 import {ProgressbarComponent, ProgressbarBodyDirective, ProgressbarStructureDirective} from './components/progressbar/progressbar.component';
 import {ToastBodyDirective, ToastComponent, ToastHeaderDirective, ToastStructureDirective} from './components/toast/toast.component';
 import {CollapseDirective, CollapseTriggerDirective} from './components/collapse';
@@ -77,6 +83,7 @@ const components = [
 	SliderHandleDirective,
 	SliderLabelDirective,
 	SliderStructureDirective,
+	SliderTickDirective,
 	ProgressbarComponent,
 	ProgressbarStructureDirective,
 	ProgressbarBodyDirective,

diff --git a/angular/bootstrap/src/components/slider/slider.component.ts b/angular/bootstrap/src/components/slider/slider.component.ts
@@ -23,9 +23,9 @@ import {
 	signal,
 	viewChild,
 } from '@angular/core';
-import {NG_VALUE_ACCESSOR} from '@angular/forms';
+import {type ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {callWidgetFactory} from '../../config';
-import type {SliderContext, SliderSlotHandleContext, SliderSlotLabelContext, SliderWidget} from './slider.gen';
+import type {SliderContext, SliderSlotHandleContext, SliderSlotLabelContext, SliderSlotTickContext, SliderWidget} from './slider.gen';
 import {createSlider} from './slider.gen';
 
 /**
@@ -43,11 +43,11 @@ export class SliderLabelDirective {
 /**
  * Directive representing a handle for a slider component.
  *
- * This directive uses a template reference to render the {@link SliderSlotLabelContext}.
+ * This directive uses a template reference to render the {@link SliderSlotHandleContext}.
  */
 @Directive({selector: 'ng-template[auSliderHandle]'})
 export class SliderHandleDirective {
-	public templateRef = inject(TemplateRef<SliderSlotLabelContext>);
+	public templateRef = inject(TemplateRef<SliderSlotHandleContext>);
 	static ngTemplateContextGuard(_dir: SliderHandleDirective, context: unknown): context is SliderSlotHandleContext {
 		return true;
 	}
@@ -107,6 +107,73 @@ class SliderDefaultHandleSlotComponent {
  */
 export const sliderDefaultSlotHandle: SlotContent<SliderSlotHandleContext> = new ComponentTemplate(SliderDefaultHandleSlotComponent, 'handle');
 
+/**
+ * Directive representing a tick for a slider component.
+ *
+ * This directive uses a template reference to render the {@link SliderSlotTickContext}.
+ */
+@Directive({selector: 'ng-template[auSliderTick]'})
+export class SliderTickDirective {
+	public templateRef = inject(TemplateRef<SliderSlotTickContext>);
+	static ngTemplateContextGuard(_dir: SliderTickDirective, context: unknown): context is SliderSlotTickContext {
+		return true;
+	}
+}
+
+@Component({
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [UseDirective, SliderTickDirective],
+	template: `
+		<ng-template auSliderTick #tick let-state="state" let-directives="directives" let-tick="tick">
+			@if (tick.displayLabel) {
+				<span [auUse]="[directives.tickLabelDirective, {tick}]">
+					{{ tick.value }}
+				</span>
+			}
+			<span [auUse]="[directives.tickDirective, {tick}]">
+				@if (!tick.selected) {
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size);"
+						fill="none"
+					>
+						<circle
+							cx="50%"
+							cy="50%"
+							r="45%"
+							fill="white"
+							[attr.stroke]="state.disabled() ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-neutral-color)'"
+							stroke-width="1.5"
+						/>
+					</svg>
+				} @else {
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size);"
+						fill="none"
+					>
+						<circle
+							cx="50%"
+							cy="50%"
+							r="50%"
+							[attr.fill]="state.disabled() ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-selected-color)'"
+						/>
+						<circle cx="50%" cy="50%" r="25%" fill="white" />
+					</svg>
+				}
+			</span>
+		</ng-template>
+	`,
+})
+class SliderDefaultTickSlotComponent {
+	readonly tick = viewChild.required<TemplateRef<SliderSlotTickContext>>('tick');
+}
+
+/**
+ * A constant representing the default slot tick for the slider component.
+ */
+export const sliderDefaultSlotTick: SlotContent<SliderSlotTickContext> = new ComponentTemplate(SliderDefaultTickSlotComponent, 'tick');
+
 /**
  * Directive that provides structure for the slider component.
  *
@@ -148,6 +215,9 @@ export class SliderStructureDirective {
 					}
 				</div>
 			}
+			@for (tick of state.ticks(); track tick.position) {
+				<ng-template [auSlot]="state.tick()" [auSlotProps]="{state, api, directives, tick}" />
+			}
 			@for (item of state.sortedHandles(); track item.id; let i = $index) {
 				<ng-template [auSlot]="state.handle()" [auSlotProps]="{state, api, directives, item}" />
 				@if (state.showValueLabels() && !state.combinedLabelDisplay()) {
@@ -184,7 +254,7 @@ export const sliderDefaultSlotStructure: SlotContent<SliderContext> = new Compon
 	},
 	template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
 })
-export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
+export class SliderComponent extends BaseWidgetDirective<SliderWidget> implements ControlValueAccessor {
 	/**
 	 * CSS classes to be applied on the widget main container
 	 *
@@ -296,6 +366,28 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 	 */
 	readonly vertical = input(undefined, {alias: 'auVertical', transform: auBooleanAttribute});
 
+	/**
+	 * If `true` the ticks are displayed on the slider
+	 *
+	 * @defaultValue `false`
+	 */
+	readonly showTicks = input(undefined, {alias: 'auShowTicks', transform: auBooleanAttribute});
+
+	/**
+	 * Unit value between the ticks
+	 * If value is set to `0` the {@link SliderCommonPropsAndState.stepSize|stepSize} is used to space the ticks
+	 *
+	 * @defaultValue `0`
+	 */
+	readonly tickInterval = input(undefined, {alias: 'auTickInterval', transform: auNumberAttribute});
+
+	/**
+	 * If `true` the tick values are displayed on the slider
+	 *
+	 * @defaultValue `true`
+	 */
+	readonly showTickValues = input(undefined, {alias: 'auShowTickValues', transform: auBooleanAttribute});
+
 	/**
 	 * An event emitted when slider values are changed
 	 *
@@ -331,6 +423,12 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 	readonly handle = input<SlotContent<SliderSlotHandleContext>>(undefined, {alias: 'auHandle'});
 	readonly slotHandleFromContent = contentChild(SliderHandleDirective);
 
+	/**
+	 * Slot to change the ticks
+	 */
+	readonly tick = input<SlotContent<SliderSlotTickContext>>(undefined, {alias: 'auTick'});
+	readonly slotTickFromContent = contentChild(SliderTickDirective);
+
 	constructor() {
 		super(
 			callWidgetFactory({
@@ -339,6 +437,7 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 				defaultConfig: {
 					structure: sliderDefaultSlotStructure,
 					handle: sliderDefaultSlotHandle,
+					tick: sliderDefaultSlotTick,
 				},
 				events: {
 					onValuesChange: (event) => {
@@ -354,6 +453,7 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 					structure: this.slotStructureFromContent()?.templateRef,
 					handle: this.slotHandleFromContent()?.templateRef,
 					label: this.slotLabelFromContent()?.templateRef,
+					tick: this.slotTickFromContent()?.templateRef,
 				}),
 			}),
 		);

diff --git a/angular/bootstrap/src/index.ts b/angular/bootstrap/src/index.ts
@@ -73,6 +73,7 @@ export type {
 	SliderState,
 	SliderWidget,
 	SliderHandle,
+	SliderTick,
 	HandleDisplayOptions,
 	ProgressDisplayOptions,
 	SliderDirectives,

diff --git a/angular/demo/bootstrap/src/app/samples/slider/right-to-left.route.ts b/angular/demo/bootstrap/src/app/samples/slider/right-to-left.route.ts
@@ -6,16 +6,16 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
 	template: `
 		<h2>Horizontal slider</h2>
-		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl" [auRtl]="true"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl" auRtl auShowTicks auTickInterval="25"></div>
 		<br />
-		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderRangeControl" [auRtl]="true"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderRangeControl" auRtl></div>
 		<h2>Vertical slider</h2>
 		<div class="d-flex" style="height: 350px">
 			<div class="col-6" style="height: 300px">
-				<div auSlider auMin="0" auMax="100" [auRtl]="true" auStepSize="1" auVertical [formControl]="sliderControl" auClassName="my-0"></div>
+				<div auSlider auMin="0" auMax="100" auRtl auStepSize="1" auVertical [formControl]="sliderControl" auClassName="my-0"></div>
 			</div>
 			<div class="col-6" style="height: 300px">
-				<div auSlider auMin="0" auMax="100" [auRtl]="true" auStepSize="1" auVertical [formControl]="sliderRangeControl" auClassName="my-0"></div>
+				<div auSlider auMin="0" auMax="100" auRtl auStepSize="1" auVertical [formControl]="sliderRangeControl" auClassName="my-0"></div>
 			</div>
 		</div>
 	`,

diff --git a/angular/demo/bootstrap/src/app/samples/slider/ticks.route.ts b/angular/demo/bootstrap/src/app/samples/slider/ticks.route.ts
@@ -0,0 +1,41 @@
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
+import {Component, effect, signal} from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+@Component({
+	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
+	template: `
+		<h2>Ticks as steps</h2>
+		<div auSlider auMin="0" auMax="100" auStepSize="25" [formControl]="sliderRangeControl" auShowTicks></div>
+
+		<div class="form-check form-switch">
+			<input class="form-check-input" type="checkbox" role="switch" id="disabled" [(ngModel)]="disabledToggle" />
+			<label class="form-check-label" for="disabled">Disabled</label>
+		</div>
+		<h2>With intermediate steps</h2>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl" auShowTicks auTickInterval="25"></div>
+		<br />
+
+		<h2>Without tick labels</h2>
+		<div auSlider auMin="0" auMax="100" auStepSize="25" [formControl]="sliderRangeControlLabels" auShowTicks auShowTickValues="false"></div>
+		<p>If <code>showTickValues</code> is set to <code>false</code> the min/max/current label display is automatically put to <code>true</code></p>
+	`,
+})
+export default class TicksSliderComponent {
+	readonly sliderControl = new FormControl([30]);
+
+	readonly sliderRangeControl = new FormControl([30, 70]);
+	readonly disabledToggle = signal(false);
+
+	readonly sliderRangeControlLabels = new FormControl([30, 70]);
+
+	constructor() {
+		effect(() => {
+			if (this.disabledToggle()) {
+				this.sliderRangeControl.disable();
+			} else {
+				this.sliderRangeControl.enable();
+			}
+		});
+	}
+}
diff --git a/angular/demo/bootstrap/src/app/samples/slider/vertical.route.ts b/angular/demo/bootstrap/src/app/samples/slider/vertical.route.ts
@@ -12,7 +12,17 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 				<div class="mt-3">Form control values: {{ sliderControlRangeValues()?.join(', ') }}</div>
 			</div>
 			<div class="col-6" style="height: 300px">
-				<div auSlider auMin="0" auMax="100" auStepSize="1" auVertical [formControl]="sliderControl" auClassName="my-0"></div>
+				<div
+					auSlider
+					auMin="0"
+					auMax="100"
+					auStepSize="1"
+					auVertical
+					[formControl]="sliderControl"
+					auClassName="my-0"
+					auShowTicks
+					auTickInterval="25"
+				></div>
 				<div class="mt-3">From control value: {{ sliderControlValues() }}</div>
 			</div>
 		</div>

diff --git a/core-bootstrap/src/components/slider/slider.ts b/core-bootstrap/src/components/slider/slider.ts
@@ -1,4 +1,4 @@
-import type {SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState} from '@agnos-ui/core/components/slider';
+import type {SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState, SliderTick} from '@agnos-ui/core/components/slider';
 import {createSlider as createCoreSlider, getSliderDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/slider';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory, WidgetSlotContext} from '@agnos-ui/core/types';
@@ -31,6 +31,16 @@ export interface SliderSlotHandleContext extends SliderContext {
 	item: SliderHandle;
 }
 
+/**
+ * Represents the context for a slider tick slot
+ */
+export interface SliderSlotTickContext extends SliderContext {
+	/**
+	 * tick context
+	 */
+	tick: SliderTick;
+}
+
 interface SliderExtraProps {
 	/**
 	 * Slot to change the default display of the slider
@@ -51,6 +61,11 @@ interface SliderExtraProps {
 	 *  Slot to change the handlers
 	 */
 	handle: SlotContent<SliderSlotHandleContext>;
+
+	/**
+	 * Slot to change the ticks
+	 */
+	tick: SlotContent<SliderSlotTickContext>;
 }
 
 /**
@@ -71,6 +86,7 @@ const defaultConfigExtraProps: SliderExtraProps = {
 	structure: undefined,
 	label: ({value}: SliderSlotLabelContext) => '' + value,
 	handle: undefined,
+	tick: undefined,
 };
 
 /**

diff --git a/core-bootstrap/src/scss/_variables.scss b/core-bootstrap/src/scss/_variables.scss
@@ -28,6 +28,12 @@ $au-slider-handle-border-radius: 50% !default;
 $au-slider-handle-outline: none !default;
 $au-slider-handle-focus-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
 $au-slider-handle-focus-hover-box-shadow: 0 0 0 $au-focus-ring-width $au-focus-ring-color !default;
+$au-slider-tick-primary-size: 1rem !default;
+$au-slider-tick-secondary-size: 1rem !default;
+$au-slider-tick-neutral-color: var(--#{$prefix}light-emphasis, #666666) !default;
+$au-slider-tick-disabled-color: var(--#{$prefix}dark-bg-subtle, #ced4da) !default;
+$au-slider-tick-selected-color: var(--#{$prefix}primary, #0d6efd) !default;
+$au-slider-tick-label-translate-vertical: translateY(75%) !default;
 $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
 $au-slider-progress-height: 0.25rem !default;
 $au-slider-progress-vertical-transform: rotate(90deg) !default;
@@ -59,11 +65,15 @@ $au-slider-disabled-cursor: not-allowed !default;
 
 $au-slider-bar-size-sm: 0.2rem !default;
 $au-slider-handle-size-sm: 1rem !default;
+$au-slider-tick-primary-size-sm: 0.75rem !default;
+$au-slider-tick-secondary-size-sm: 0.75rem !default;
 $au-slider-font-size-sm: 0.875rem !default;
 $au-slider-offset-sm: 0rem !default;
 
 $au-slider-bar-size-lg: 0.3125rem !default;
 $au-slider-handle-size-lg: 1.5rem !default;
+$au-slider-tick-primary-size-lg: 1.25rem !default;
+$au-slider-tick-secondary-size-lg: 1.25rem !default;
 $au-slider-font-size-lg: 1.125rem !default;
 $au-slider-offset-lg: 0rem !default;
 // scss-docs-end slider-vars