APG Patterns
日本語 GitHub
日本語 GitHub

Slider

An interactive control that allows users to select a value from within a range.

🤖 AI Implementation Guide
Svelte

Demo

Volume
Progress
Rating
Vertical
Disabled

Native HTML

Use Native HTML First

Before using this custom component, consider using native <input type="range"> elements. They provide built-in keyboard support, work without JavaScript, and have native accessibility support. 

<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="100" value="50">

Use custom implementations only when you need custom styling that native elements cannot provide, or when you require specific visual feedback during interactions.

Use Case Native HTML Custom Implementation
Basic value selection Recommended Not needed
Keyboard support Built-in Manual implementation
JavaScript disabled support Works natively Requires fallback
Form integration Built-in Manual implementation
Custom styling Limited (pseudo-elements) Full control
Consistent cross-browser appearance Varies significantly Consistent
Vertical orientation Limited browser support Full control

Note: Native <input type="range"> styling is notoriously inconsistent across browsers. Styling requires vendor-specific pseudo-elements (::-webkit-slider-thumb, ::-moz-range-thumb, etc.) which can be complex to maintain.

Accessibility Features

WAI-ARIA Role

Role Element Description
slider Thumb element Identifies the element as a slider that allows users to select a value from within a range.

The slider role is used for interactive controls that let users select a value by moving a thumb along a track. Unlike the meter role, sliders are interactive and receive keyboard focus.

WAI-ARIA States and Properties

aria-valuenow (Required)

Indicates the current numeric value of the slider. Updated dynamically as the user changes the value.

Type Number
Required Yes
Range Must be between aria-valuemin and aria-valuemax

aria-valuemin (Required)

Specifies the minimum allowed value for the slider.

Type Number
Required Yes
Default 0

aria-valuemax (Required)

Specifies the maximum allowed value for the slider.

Type Number
Required Yes
Default 100

aria-valuetext

Provides a human-readable text alternative for the current value. Use when the numeric value alone doesn't convey sufficient meaning.

Type String
Required No (recommended when value needs context)
Example "50%", "Medium", "3 of 5 stars"

aria-orientation

Specifies the orientation of the slider. Only set to "vertical" for vertical sliders; omit for horizontal (default).

Type "horizontal" | "vertical"
Required No
Default horizontal (implicit)

aria-disabled

Indicates that the slider is disabled and not interactive.

Type Boolean
Required No

Keyboard Support

Key Action
Right Arrow Increases the value by one step
Up Arrow Increases the value by one step
Left Arrow Decreases the value by one step
Down Arrow Decreases the value by one step
Home Sets the slider to its minimum value
End Sets the slider to its maximum value
Page Up Increases the value by a large step (default: step * 10)
Page Down Decreases the value by a large step (default: step * 10)

Accessible Naming

Sliders must have an accessible name. This can be provided through:

  • Visible label - Using the label prop to display a visible label
  • aria-label - Provides an invisible label for the slider
  • aria-labelledby - References an external element as the label

Pointer Interaction

This implementation supports mouse and touch interaction:

  • Click on track - Immediately moves the thumb to the clicked position
  • Drag thumb - Allows continuous adjustment while dragging
  • Pointer capture - Maintains interaction even when pointer moves outside the slider

Visual Design

This implementation follows WCAG guidelines for accessible visual design:

  • Focus indicator - Visible focus ring on the thumb element
  • Visual fill - Proportionally represents the current value
  • Hover states - Visual feedback on hover
  • Disabled state - Clear visual indication when slider is disabled
  • Forced colors mode - Uses system colors for accessibility in Windows High Contrast Mode

References

Source Code

Slider.svelte 
<script lang="ts">
  interface SliderProps {
    defaultValue?: number;
    min?: number;
    max?: number;
    step?: number;
    largeStep?: number;
    orientation?: 'horizontal' | 'vertical';
    disabled?: boolean;
    showValue?: boolean;
    label?: string;
    valueText?: string;
    /** Format pattern for dynamic value display (e.g., "{value}%", "{value} of {max}") */
    format?: string;
    onvaluechange?: (value: number) => void;
    [key: string]: unknown;
  }

  let {
    defaultValue,
    min = 0,
    max = 100,
    step = 1,
    largeStep,
    orientation = 'horizontal',
    disabled = false,
    showValue = true,
    label,
    valueText,
    format,
    onvaluechange,
    ...restProps
  }: SliderProps = $props();

  // Utility functions
  function clamp(val: number, minVal: number, maxVal: number): number {
    return Math.min(maxVal, Math.max(minVal, val));
  }

  function roundToStep(val: number, stepVal: number, minVal: number): number {
    const steps = Math.round((val - minVal) / stepVal);
    const result = minVal + steps * stepVal;
    const decimalPlaces = (stepVal.toString().split('.')[1] || '').length;
    return Number(result.toFixed(decimalPlaces));
  }

  function getPercent(val: number, minVal: number, maxVal: number): number {
    if (maxVal === minVal) return 0;
    return ((val - minVal) / (maxVal - minVal)) * 100;
  }

  // Format value helper
  function formatValueText(
    val: number,
    formatStr: string | undefined,
    minVal: number,
    maxVal: number
  ): string {
    if (!formatStr) return String(val);
    return formatStr
      .replace('{value}', String(val))
      .replace('{min}', String(minVal))
      .replace('{max}', String(maxVal));
  }

  // Generate unique ID for label
  const labelId = `slider-label-${Math.random().toString(36).slice(2, 9)}`;

  // Refs
  let thumbEl: HTMLDivElement | null = null;
  let trackEl: HTMLDivElement | null = null;
  let isDragging = $state(false);

  // State - calculate initial value inline (warnings are acceptable for uncontrolled component)
  // eslint-disable-next-line svelte/valid-compile -- intentional capture of initial props
  let value = $state(clamp(roundToStep(defaultValue ?? min, step, min), min, max));

  // Computed
  const isVertical = $derived(orientation === 'vertical');
  const effectiveLargeStep = $derived(largeStep ?? step * 10);
  const percent = $derived(getPercent(value, min, max));

  const ariaValueText = $derived(
    valueText ?? (format ? formatValueText(value, format, min, max) : undefined)
  );

  const displayText = $derived(valueText ? valueText : formatValueText(value, format, min, max));

  const ariaLabelledby = $derived(restProps['aria-labelledby'] ?? (label ? labelId : undefined));

  // Update value and dispatch event
  function updateValue(newValue: number) {
    const clampedValue = clamp(roundToStep(newValue, step, min), min, max);
    if (clampedValue !== value) {
      value = clampedValue;
      onvaluechange?.(clampedValue);
    }
  }

  // Calculate value from pointer position
  function getValueFromPointer(clientX: number, clientY: number): number {
    if (!trackEl) return value;

    const rect = trackEl.getBoundingClientRect();

    // Guard against zero-size track
    if (rect.width === 0 && rect.height === 0) {
      return value;
    }

    let pct: number;

    if (isVertical) {
      if (rect.height === 0) return value;
      pct = 1 - (clientY - rect.top) / rect.height;
    } else {
      if (rect.width === 0) return value;
      pct = (clientX - rect.left) / rect.width;
    }

    const rawValue = min + pct * (max - min);
    return clamp(roundToStep(rawValue, step, min), min, max);
  }

  // Keyboard handler
  function handleKeyDown(event: KeyboardEvent) {
    if (disabled) return;

    let newValue = value;

    switch (event.key) {
      case 'ArrowRight':
      case 'ArrowUp':
        newValue = value + step;
        break;
      case 'ArrowLeft':
      case 'ArrowDown':
        newValue = value - step;
        break;
      case 'Home':
        newValue = min;
        break;
      case 'End':
        newValue = max;
        break;
      case 'PageUp':
        newValue = value + effectiveLargeStep;
        break;
      case 'PageDown':
        newValue = value - effectiveLargeStep;
        break;
      default:
        return;
    }

    event.preventDefault();
    updateValue(newValue);
  }

  // Pointer handlers
  function handlePointerDown(event: PointerEvent) {
    if (disabled) return;

    event.preventDefault();
    if (!thumbEl) return;

    if (typeof thumbEl.setPointerCapture === 'function') {
      thumbEl.setPointerCapture(event.pointerId);
    }
    isDragging = true;
    thumbEl.focus();

    const newValue = getValueFromPointer(event.clientX, event.clientY);
    updateValue(newValue);
  }

  function handlePointerMove(event: PointerEvent) {
    if (!thumbEl) return;

    const hasCapture =
      typeof thumbEl.hasPointerCapture === 'function'
        ? thumbEl.hasPointerCapture(event.pointerId)
        : isDragging;

    if (!hasCapture) return;

    const newValue = getValueFromPointer(event.clientX, event.clientY);
    updateValue(newValue);
  }

  function handlePointerUp(event: PointerEvent) {
    if (thumbEl && typeof thumbEl.releasePointerCapture === 'function') {
      try {
        thumbEl.releasePointerCapture(event.pointerId);
      } catch {
        // Ignore
      }
    }
    isDragging = false;
  }

  // Track click handler
  function handleTrackClick(event: MouseEvent) {
    if (disabled) return;
    if (event.target === thumbEl) return;

    const newValue = getValueFromPointer(event.clientX, event.clientY);
    updateValue(newValue);
    thumbEl?.focus();
  }
</script>

<div
  class="apg-slider {isVertical ? 'apg-slider--vertical' : ''} {disabled
    ? 'apg-slider--disabled'
    : ''} {restProps.class || ''}"
>
  {#if label}
    <span id={labelId} class="apg-slider-label">
      {label}
    </span>
  {/if}
  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
  <div
    bind:this={trackEl}
    class="apg-slider-track"
    style="--slider-position: {percent}%"
    onclick={handleTrackClick}
  >
    <div class="apg-slider-fill" aria-hidden="true"></div>
    <div
      bind:this={thumbEl}
      role="slider"
      id={restProps.id}
      tabindex={disabled ? -1 : 0}
      aria-valuenow={value}
      aria-valuemin={min}
      aria-valuemax={max}
      aria-valuetext={ariaValueText}
      aria-label={restProps['aria-label']}
      aria-labelledby={ariaLabelledby}
      aria-orientation={isVertical ? 'vertical' : undefined}
      aria-disabled={disabled ? true : undefined}
      aria-describedby={restProps['aria-describedby']}
      data-testid={restProps['data-testid']}
      class="apg-slider-thumb"
      onkeydown={handleKeyDown}
      onpointerdown={handlePointerDown}
      onpointermove={handlePointerMove}
      onpointerup={handlePointerUp}
    ></div>
  </div>
  {#if showValue}
    <span class="apg-slider-value" aria-hidden="true">
      {displayText}
    </span>
  {/if}
</div>

Usage

Example 
<script>
  import Slider from './Slider.svelte';

  function handleChange(value) {
    console.log('Value changed:', value);
  }
</script>

<!-- Basic usage with aria-label -->
<Slider defaultValue={50} aria-label="Volume" />

<!-- With visible label -->
<Slider defaultValue={50} label="Volume" />

<!-- With format for display and aria-valuetext -->
<Slider
  defaultValue={75}
  label="Progress"
  format="{value}%"
/>

<!-- Custom range with step -->
<Slider
  defaultValue={3}
  min={1}
  max={5}
  step={1}
  label="Rating"
  format="{value} of {max}"
/>

<!-- Vertical slider -->
<Slider
  defaultValue={50}
  label="Volume"
  orientation="vertical"
/>

<!-- With callback -->
<Slider
  defaultValue={50}
  label="Value"
  onvaluechange={handleChange}
/>

API

Prop Type Default Description
defaultValue number min Initial value of the slider
min number 0 Minimum value
max number 100 Maximum value
step number 1 Step increment for keyboard navigation
largeStep number step * 10 Large step for PageUp/PageDown
orientation 'horizontal' | 'vertical' 'horizontal' Slider orientation
disabled boolean false Whether the slider is disabled
showValue boolean true Whether to display the value text
label string - Visible label (also used as aria-labelledby)
valueText string - Human-readable value for aria-valuetext
format string - Format pattern for display and aria-valuetext (e.g., "{value}%", "{value} of {max}")
onvaluechange (value: number) => void - Callback when value changes

One of label, aria-label, or aria-labelledby is required for accessibility.

Testing

Tests verify APG compliance for ARIA attributes, keyboard interactions, pointer operations, and accessibility requirements.

Test Categories

High Priority: ARIA Attributes

Test Description
role="slider" Element has the slider role
aria-valuenow Current value is correctly set and updated
aria-valuemin Minimum value is set (default: 0)
aria-valuemax Maximum value is set (default: 100)
aria-valuetext Human-readable text is set when provided
aria-disabled Disabled state is reflected when set

High Priority: Accessible Name

Test Description
aria-label Accessible name via aria-label attribute
aria-labelledby Accessible name via external element reference
visible label Visible label provides accessible name

High Priority: Keyboard Interaction

Test Description
Arrow Right/Up Increases value by one step
Arrow Left/Down Decreases value by one step
Home Sets value to minimum
End Sets value to maximum
Page Up/Down Increases/decreases value by large step
Boundary clamping Value does not exceed min/max limits
Disabled state Keyboard has no effect when disabled

High Priority: Focus Management

Test Description
tabindex="0" Thumb is focusable
tabindex="-1" Thumb is not focusable when disabled

High Priority: Orientation

Test Description
horizontal No aria-orientation for horizontal slider
vertical aria-orientation="vertical" is set

Medium Priority: Accessibility

Test Description
axe violations No accessibility violations detected by axe-core

Medium Priority: Edge Cases

Test Description
decimal values Handles decimal step values correctly
negative range Handles negative min/max ranges
clamp to min defaultValue below min is clamped to min
clamp to max defaultValue above max is clamped to max

Medium Priority: Callbacks

Test Description
onValueChange Callback is called with new value on change

Low Priority: HTML Attribute Inheritance

Test Description
className Custom class is applied to container
id ID attribute is set correctly
data-* Data attributes are passed through

Testing Tools

Slider.test.svelte.ts 
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { axe } from 'jest-axe';
import { describe, expect, it, vi } from 'vitest';
import Slider from './Slider.svelte';
import SliderWithLabel from './SliderWithLabel.test.svelte';

describe('Slider (Svelte)', () => {
  // 🔴 High Priority: ARIA Attributes
  describe('ARIA Attributes', () => {
    it('has role="slider"', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      expect(screen.getByRole('slider')).toBeInTheDocument();
    });

    it('has aria-valuenow set to current value', () => {
      render(Slider, {
        props: { defaultValue: 50, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '50');
    });

    it('has aria-valuenow set to min when no defaultValue', () => {
      render(Slider, {
        props: { min: 10, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '10');
    });

    it('has aria-valuemin set (default: 0)', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuemin', '0');
    });

    it('has aria-valuemax set (default: 100)', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuemax', '100');
    });

    it('has custom aria-valuemin when provided', () => {
      render(Slider, {
        props: { defaultValue: 50, min: 10, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuemin', '10');
    });

    it('has custom aria-valuemax when provided', () => {
      render(Slider, {
        props: { defaultValue: 50, max: 200, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuemax', '200');
    });

    it('has aria-valuetext when valueText provided', () => {
      render(Slider, {
        props: { defaultValue: 75, valueText: '75 percent', 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuetext', '75 percent');
    });

    it('does not have aria-valuetext when not provided', () => {
      render(Slider, {
        props: { defaultValue: 75, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).not.toHaveAttribute('aria-valuetext');
    });

    it('uses format for aria-valuetext', () => {
      render(Slider, {
        props: {
          defaultValue: 75,
          format: '{value}%',
          'aria-label': 'Volume',
        },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuetext', '75%');
    });

    it('has aria-disabled="true" when disabled', () => {
      render(Slider, {
        props: { disabled: true, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-disabled', 'true');
    });

    it('does not have aria-disabled when not disabled', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).not.toHaveAttribute('aria-disabled');
    });
  });

  // 🔴 High Priority: Accessible Name
  describe('Accessible Name', () => {
    it('has accessible name via aria-label', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      expect(screen.getByRole('slider', { name: 'Volume' })).toBeInTheDocument();
    });

    it('has accessible name via aria-labelledby', () => {
      render(SliderWithLabel);
      expect(screen.getByRole('slider', { name: 'Brightness' })).toBeInTheDocument();
    });

    it('has accessible name via visible label', () => {
      render(Slider, {
        props: { label: 'Zoom Level' },
      });
      expect(screen.getByRole('slider', { name: 'Zoom Level' })).toBeInTheDocument();
    });
  });

  // 🔴 High Priority: Keyboard Interaction
  describe('Keyboard Interaction', () => {
    it('increases value by step on ArrowRight', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, step: 1, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{ArrowRight}');

      expect(slider).toHaveAttribute('aria-valuenow', '51');
    });

    it('decreases value by step on ArrowLeft', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, step: 1, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{ArrowLeft}');

      expect(slider).toHaveAttribute('aria-valuenow', '49');
    });

    it('sets min value on Home', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, min: 0, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{Home}');

      expect(slider).toHaveAttribute('aria-valuenow', '0');
    });

    it('sets max value on End', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, max: 100, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{End}');

      expect(slider).toHaveAttribute('aria-valuenow', '100');
    });

    it('increases value by large step on PageUp', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, step: 1, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{PageUp}');

      expect(slider).toHaveAttribute('aria-valuenow', '60');
    });

    it('does not exceed max on ArrowRight', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 100, max: 100, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{ArrowRight}');

      expect(slider).toHaveAttribute('aria-valuenow', '100');
    });

    it('does not change value when disabled', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, disabled: true, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      slider.focus();
      await user.keyboard('{ArrowRight}');

      expect(slider).toHaveAttribute('aria-valuenow', '50');
    });
  });

  // 🔴 High Priority: Focus Management
  describe('Focus Management', () => {
    it('has tabindex="0" on thumb', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('tabindex', '0');
    });

    it('has tabindex="-1" when disabled', () => {
      render(Slider, {
        props: { disabled: true, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('tabindex', '-1');
    });
  });

  // 🔴 High Priority: Orientation
  describe('Orientation', () => {
    it('does not have aria-orientation for horizontal slider', () => {
      render(Slider, {
        props: { orientation: 'horizontal', 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).not.toHaveAttribute('aria-orientation');
    });

    it('has aria-orientation="vertical" for vertical slider', () => {
      render(Slider, {
        props: { orientation: 'vertical', 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-orientation', 'vertical');
    });
  });

  // 🟡 Medium Priority: Accessibility
  describe('Accessibility', () => {
    it('has no axe violations', async () => {
      const { container } = render(Slider, {
        props: { 'aria-label': 'Volume' },
      });
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it('has no axe violations with visible label', async () => {
      const { container } = render(Slider, {
        props: { label: 'Volume' },
      });
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it('has no axe violations when disabled', async () => {
      const { container } = render(Slider, {
        props: { disabled: true, 'aria-label': 'Volume' },
      });
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it('has no axe violations for vertical slider', async () => {
      const { container } = render(Slider, {
        props: { orientation: 'vertical', 'aria-label': 'Volume' },
      });
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });
  });

  // 🟡 Medium Priority: Callbacks
  describe('Callbacks', () => {
    it('calls onvaluechange on keyboard interaction', async () => {
      const handleChange = vi.fn();
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 50, onvaluechange: handleChange, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{ArrowRight}');

      expect(handleChange).toHaveBeenCalledWith(51);
    });
  });

  // 🟡 Medium Priority: Edge Cases
  describe('Edge Cases', () => {
    it('handles decimal step values correctly', async () => {
      const user = userEvent.setup();
      render(Slider, {
        props: { defaultValue: 0.5, min: 0, max: 1, step: 0.1, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');

      await user.click(slider);
      await user.keyboard('{ArrowRight}');

      expect(slider).toHaveAttribute('aria-valuenow', '0.6');
    });

    it('handles negative min/max range', () => {
      render(Slider, {
        props: { defaultValue: 0, min: -50, max: 50, 'aria-label': 'Temperature' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '0');
      expect(slider).toHaveAttribute('aria-valuemin', '-50');
      expect(slider).toHaveAttribute('aria-valuemax', '50');
    });

    it('clamps defaultValue to min', () => {
      render(Slider, {
        props: { defaultValue: -10, min: 0, max: 100, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '0');
    });

    it('clamps defaultValue to max', () => {
      render(Slider, {
        props: { defaultValue: 150, min: 0, max: 100, 'aria-label': 'Volume' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '100');
    });
  });

  // 🟡 Medium Priority: Visual Display
  describe('Visual Display', () => {
    it('shows value when showValue is true (default)', () => {
      render(Slider, {
        props: { defaultValue: 75, 'aria-label': 'Volume' },
      });
      expect(screen.getByText('75')).toBeInTheDocument();
    });

    it('hides value when showValue is false', () => {
      render(Slider, {
        props: { defaultValue: 75, showValue: false, 'aria-label': 'Volume' },
      });
      expect(screen.queryByText('75')).not.toBeInTheDocument();
    });

    it('displays formatted value when format provided', () => {
      render(Slider, {
        props: {
          defaultValue: 75,
          format: '{value}%',
          'aria-label': 'Volume',
        },
      });
      expect(screen.getByText('75%')).toBeInTheDocument();
    });

    it('displays visible label when label provided', () => {
      render(Slider, {
        props: { label: 'Volume' },
      });
      expect(screen.getByText('Volume')).toBeInTheDocument();
    });
  });

  // 🟢 Low Priority: HTML Attribute Inheritance
  describe('HTML Attribute Inheritance', () => {
    it('applies class to container', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume', class: 'custom-slider' },
      });
      const container = screen.getByRole('slider').closest('.apg-slider');
      expect(container).toHaveClass('custom-slider');
    });

    it('sets id attribute on slider element', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume', id: 'my-slider' },
      });
      const slider = screen.getByRole('slider');
      expect(slider).toHaveAttribute('id', 'my-slider');
    });

    it('passes through data-* attributes', () => {
      render(Slider, {
        props: { 'aria-label': 'Volume', 'data-testid': 'custom-slider' },
      });
      expect(screen.getByTestId('custom-slider')).toBeInTheDocument();
    });
  });
});

Resources