# Slider Slider builds on the shared field system, so it supports labels, helper and error text, validation, disabled and readonly states, plus slider-specific features such as min/max ranges, step markers, vertical orientation, and formatted value text. ## Import ```ts import { SliderComponent } from 'ui'; ``` ## Basic range selection ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:10rem'; @Component({ selector: 'app-slider-basic-example', standalone: true, imports: [FormsModule, SliderComponent], template: `

Value

{{ volume }}%

{{ getVolumeAriaValueText(volume) }}

`, }) export class SliderBasicExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected volume = 64; protected readonly getVolumeAriaValueText = (value: number) => `${value} percent volume`; } ``` ## Sizes and density ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:11rem'; @Component({ selector: 'app-slider-sizes-example', standalone: true, imports: [FormsModule, SliderComponent], template: `

Values

Small {{ smallValue }} Medium {{ mediumValue }} Large {{ largeValue }}
`, }) export class SliderSizesExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected smallValue = 25; protected mediumValue = 50; protected largeValue = 75; } ``` ## Custom ranges and formatting ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:12rem'; @Component({ selector: 'app-slider-ranges-example', standalone: true, imports: [FormsModule, SliderComponent], template: `

Values

Rating {{ rating }}/10
Discount {{ discount }}%
Budget {{ formatCurrency(budget) }}
{{ getRatingText(rating) }}. {{ getDiscountText(discount) }}.
`, }) export class SliderRangesExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected rating = 7; protected discount = 20; protected budget = 20000; protected readonly formatCurrency = (value: number) => `$${value.toLocaleString()}`; protected readonly getRatingText = (value: number) => `${value} out of 10`; protected readonly getDiscountText = (value: number) => `${value} percent discount`; } ``` ## Discrete steps and min/max labels ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:10rem'; @Component({ selector: 'app-slider-steps-example', standalone: true, imports: [FormsModule, SliderComponent], template: `

Selected score

{{ score }}

`, }) export class SliderStepsExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected score = 6; } ``` ## Vertical and readonly variants ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:12rem'; @Component({ selector: 'app-slider-vertical-example', standalone: true, imports: [FormsModule, SliderComponent], template: `

Values

Mic gain {{ gain }}
Readonly {{ readonlyValue }}
Disabled {{ disabledValue }}
`, }) export class SliderVerticalExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected gain = 4; protected readonlyValue = 68; protected disabledValue = 40; } ``` ## Settings panel pattern ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderComponent, SwitchComponent } from 'ui'; const dashedCardStyle = 'padding:0.875rem 1rem;border:1px dashed var(--color-neutral-stroke-rest);border-radius:1rem;background:var(--color-neutral-background2-rest);min-width:11rem'; @Component({ selector: 'app-slider-settings-panel-example', standalone: true, imports: [FormsModule, SliderComponent, SwitchComponent], template: `
Notification settings
Tune how strongly the system should notify account owners.

Values

Threshold {{ threshold }}%
Reminder {{ formatDays(reminderDays) }}
Sponsors {{ notifySponsors ? 'On' : 'Off' }}
{{ getThresholdText(threshold) }} ยท {{ getReminderText(reminderDays) }}
`, }) export class SliderSettingsPanelExampleComponent { readonly dashedCardStyle = dashedCardStyle; protected threshold = 65; protected reminderDays = 3; protected notifySponsors = true; protected readonly formatDays = (value: number) => `${value}d`; protected readonly getThresholdText = (value: number) => `${value} percent threshold`; protected readonly getReminderText = (value: number) => `Every ${value} days`; } ``` ## Accessibility ### Accessible name and value text The slider uses `ariaLabel` when provided and otherwise falls back to the visible field label. Keep the label specific to the controlled setting, such as `Volume` or `Approval threshold`. Use `ariaValueText` when the raw number is not descriptive enough, for example ratings, percentages, or formatted currency. ### Keyboard | Key | Action | | --- | --- | | `ArrowLeft` / `ArrowDown` | decreases value by one step | | `ArrowRight` / `ArrowUp` | increases value by one step | | `Home` | jumps to minimum | | `End` | jumps to maximum | | `Tab` | moves focus to or from the slider | ### Range semantics and state The input exposes `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`. Readonly sliders leave the value visible without allowing edits; disabled sliders are removed from normal interaction. | State | Attribute | | --- | --- | | current value | `aria-valuenow` | | min / max | `aria-valuemin` and `aria-valuemax` | | richer wording | `aria-valuetext` when provided | | readonly | `aria-readonly="true"` |