📝 Description

Select numeric values by dragging one or more thumbs along a track.

♿ Accessibility

• Usable with mouse, keyboard, or touch.
• The slider has role="slider" and the following ARIA attributes: aria-valuenow, aria-valuemin, aria-valuemax.
• The slider must have a label, either hidden via aria-label or visible via aria-labelledby.
• If the numbers represent meaningful values (e.g., days of the week), use aria-valuetext to expose the current value in a human-understandable way (e.g., "Monday").
• If the slider has multiple thumbs, the role and ARIA attributes are set on each thumb instead of the slider element itself.

⚙️ Requirements

• The slider is composed of a fixed track and one or more sliding thumbs.
• The track is horizontal by default but can be configured as vertical using the vertical property.
• A range property adds a second thumb to allow selection of a numeric range.
• Two thumbs cannot cross each other.
• The minimum value of the track defaults to 0 but can be configured with a min property.
• The maximum value of the track defaults to 100 but can be configured with a max property.
• The step size defaults to 1 but can be configured with a step property.
• The step is based on min if specified, otherwise on value, or 0 if neither is provided (e.g., with min="3" and step="2", thumbs snap to 3, 5, 7, 9, …).
• min, max, and step must be numbers. min must be lower than max. step must be lower than max - min.
• The value property represents the position of the thumb(s):
  • If range is false → a single number.
  • If range is true → a tuple [number, number].
• Default placement of thumbs:
  • Single thumb → centered between min and max (rounded).
  • Range → placed at one-third and two-thirds of the track.
• Thumbs always snap to the closest step.
  • Example: if step="3", a value of 1 snaps to 0, a value of 2 snaps to 3.
• Thumbs never move past the min or max.
• Values can optionally be formatted.
• Values are always shown in ascending order.
• Ticks can be added via a slotted <datalist> with <option> elements.
• If the options have labels, they are shown alongside the ticks.
• Ticks and labels are always displayed above the track (or to the left for vertical sliders) so they remain visible when using touch. (It is recommended to implement this layout using CSS grid to ensure consistent alignment between the track, ticks, and labels.)
• The slider emits:
  • an input event whenever a thumb moves (multiple emissions while sliding).
  • a change event whenever a thumb position is committed (emitted once when the user releases the thumb).

🧪 Testing

Single, range, and vertical slider scenarios.

• Correct snapping to steps with different min/max/step configurations.
• Default thumb placement logic.
• Value formatting behavior.
• Ticks and labels rendering correctly via <datalist>.
• Event emissions (input vs change).
• Preventing thumbs from crossing or exceeding min/max.
• Accessibility: ARIA attributes, keyboard navigation, screen reader value announcements.
• Responsiveness on touch devices and across browsers.

💻 Proposed implementation

// default slider min is 0, max is 100, step is 1 and value is 50
<post-slider />

// range slider min is 0, max is 100, step is 1 and value is [33, 67]
<post-slider range="true" />

// slider with ticks
<post-slider>
  <datalist id="values">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
</post-slider>

// slider with ticks
<post-slider max="6" value="1" >
  <datalist>
    <option value="0" label="Sunday"></option>
    <option value="1" label="Monday"></option>
    <option value="2" label="Tuesday"></option>
    <option value="3" label="Wednesday"></option>
    <option value="4" label="Thursday"></option>
    <option value="5" label="Friday"></option>
    <option value="6" label="Saturday"></option>
  </datalist>
</post-slider>

🔗 References

• https://www.w3.org/WAI/ARIA/apg/patterns/slider/
• https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
• https://ant.design/components/slider
• https://mui.com/material-ui/react-slider
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range

📃 Tasks

• Implement component functionality
• Create developer-only documentation in Storybook
• Add functional tests
• Add React integration tests
• Add Angular integration tests