Draw the slider without Tailwind

<x-slider> renders data-md-slider with its size, colour, value label,
orientation and centring as data-md-* attributes and its parts as
data-md-slider-*; every size, colour role, disabled state, the vertical
quarter turn, RTL mirroring and the no-script fallback move into
components/slider.css as custom properties per size and colour (plan
step 36). slider.js reads the props from the root and marks the
renamed handle, tick and icon hooks.

Browser tests pin the handle centred on the track at each size, Space
held with an arrow, and the vertical slider's drag along Y, keys and
value label beside the handle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 15:01:19 +02:00

co-authored by

Claude Opus 5

parent 1bb5adab0e

commit 281c21b0a4

6 changed files with 660 additions and 247 deletions

									
										resources/css/components.css
									
		+1
		
												View File
												
				@@ -27,6 +27,7 @@

				@import './components/chip.css';

				@import './components/chip-set.css';

				@import './components/choices.css';

				@import './components/slider.css';

				/* Containment */