@xsolla/xui-slider 0.202.2 → 0.202.4

package/README.md

@@ -2,59 +2,47 @@
 
 A cross-platform React slider component for selecting values within a range. Supports single value, range mode with two thumbs, and optional input fields for direct value entry.
 <!-- BEGIN:xui-mcp-instructions:slider -->
-Slider lets users set a value by dragging a thumb along a track. The filled portion of the track shows the current magnitude, giving immediate visual feedback. With Range: True the slider has two thumbs, letting users define a span between a minimum and a maximum.
+A control that lets users set a value by dragging a thumb along a track. The filled portion of the track shows the current magnitude, giving immediate visual feedback. With Range=True the slider has two thumbs, letting users define a span between a minimum and a maximum.
 
-### When to use
+Slider is a pure track-and-thumb component. It has no built-in label, value readout, or numeric input — these must be provided by the surrounding layout or via InputRange which composes the Slider with editable input fields.
 
-When the user adjusts a value along a continuous or stepped scale and quick, approximate setting matters more than exact entry (volume, brightness, opacity, zoom)
+### When to use
+- When the user adjusts a value along a continuous or stepped scale and quick, approximate setting matters more than exact entry — volume, brightness, opacity, zoom level
 - When seeing the magnitude visually helps the user judge the choice
-- When filtering by a numeric range — use Range: True for a min–max span (e.g. price, age)
+- When filtering by a numeric range — use Range=True for a min–max span (e.g. price filter, age range, score threshold)
 
 ### When not to use
-
-When the user needs to enter a precise or exact number — use a numeric InputRange field instead
-
-When the choice is a small set of discrete, named options — use a SegmentedControl or Radio buttons instead or MultiSelect
-- When the control is a simple on/off — use a Switch instead
+- When the user needs to enter a precise or exact number — use a numeric InputRange field instead
+- When the choice is a small set of discrete, named options — use ToggleButtonGroup, Radio buttons, or Select
+- When the control is a simple on/off — use a Switch
 - When the value has no meaningful continuous or ordered scale
 
 ### Content guidelines
-
-Always pair the slider with a visible label and a readout of the current value; do not rely on the thumb position alone.
-
-Show units in the value readout where relevant (e.g. *"70%"*, *"$1,200"*).
-
-Display the minimum and maximum bounds when they aren't obvious, so users understand the range.
-
-For Range: True, expose both values (lower and upper) so the selected span is always clear.
-
-Keep the scale meaningful: choose a step that matches how precisely the user actually needs to set the value.
+- Label — always provide a visible label above or beside the slider. Do not rely on the thumb position alone to communicate what is being controlled.
+- Value readout — show the current value numerically alongside the slider. Include units: *"70%"*, *"$1,200"*, *"2.5 MB"*.
+- Range readout — for Range=True, always show both the lower and upper values so the selected span is always clear.
+- Min / max markers — show the scale boundaries when they are not obvious from context. Use short labels or numeric values: 0, 100, $0, $10,000.
+- Step clarity — if the step size is non-obvious (e.g. jumps of 5 on a 0–100 scale), communicate this in helper text: *"Adjustable in steps of 5"*.
 
 ### Behaviour guidelines
-
-Setting a value — the user drags the thumb or clicks anywhere on the track; the filled portion updates to reflect the current value.
-
-Fullness — the fill grows from the start of the track to the thumb, representing the value from 0 to 100% of the range.
-
-Range: True — two thumbs define the span; the fill sits between them, and the thumbs cannot cross past each other.
-
-Feedback — reflect the current value live while dragging; surface the exact value (e.g. in a tooltip or the readout) so users aren't guessing.
-
-Disabled — the disabled state is dimmed and non-interactive; the thumb cannot be dragged or focused.
+- Setting a value — the user drags the thumb or clicks anywhere on the track; the filled portion and thumb position update immediately to reflect the new value.
+- Track click — clicking anywhere on the inactive track (not on the thumb) moves the nearest thumb to that position. For Range=True, click snaps to the closer of the two thumbs.
+- Fullness direction — the fill grows from the start of the track (left in LTR) to the thumb for Range=False, and between the two thumbs for Range=True.
+- Live feedback — reflect the current value in real time while dragging. Show the exact value in a tooltip over the thumb or in a nearby readout — do not make users guess from thumb position alone.
+- Step size — define a step appropriate to the data domain (e.g. 1 for percentages, 5 for large ranges). Choose a step that matches how precisely the user actually needs to set the value.
+- Value readout — Slider has no built-in label or value display. Always pair it with a visible label and a readout of the current value outside the component. Show units where relevant (e.g. *"70%"*, *"$1,200"*).
+- Min / max labels — display the minimum and maximum bounds adjacent to the track when they aren't obvious, so users understand the scale.
+- Disabled state — the disabled state is dimmed and non-interactive; the thumb cannot be dragged or focused. If the current value still needs to be communicated, consider a read-only presentation instead.
 
 ### Accessibility
-
-Each thumb must be keyboard-operable: arrow keys adjust by one step, and Home / End jump to the minimum and maximum.
-
-Expose the value to assistive technology with the slider role and current, minimum, and maximum values, including a text version with units where needed.
-
-For Range: True, make each thumb separately focusable and clearly labelled (e.g. *"Minimum"* and *"Maximum"*).
-
-Show a visible focus indicator on the active thumb.
-
-Never rely on the fill color alone to communicate the value — always provide a textual readout and an associated label.
-
-Disabled sliders should not receive keyboard focus; consider a read-only presentation if the value still needs to be conveyed.
+- Each thumb must have role=*"slider"* with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext (for a human-readable value with units, e.g. *"70%"* or *"$200"*).
+- Each thumb must be keyboard-operable: ← / ↓ decrements by one step; → / ↑ increments by one step; Home jumps to the minimum; End jumps to the maximum. Page Down / Page Up can move by a larger step (e.g. 10% of range).
+- For Range=True, each thumb must be separately focusable and clearly labelled — e.g. aria-label=*"Minimum price"* and aria-label=*"Maximum price"*.
+- Show a visible focus indicator on the active thumb (:focus-visible ring).
+- Never rely on the fill colour alone to communicate the value — always provide a textual readout and an associated label (WCAG 1.4.1).
+- State=Disable thumbs must not receive keyboard focus. Use aria-disabled=*"true"* and tabindex=*"-1"* on the thumb element.
+- When the value changes via keyboard or drag, update aria-valuenow and aria-valuetext so screen readers announce the new value.
+- Wrap the slider and its label in a container with role=*"group"* and aria-label when the slider is part of a form (e.g. aria-label=*"Price range filter"*).
 <!-- END:xui-mcp-instructions:slider -->
 
 ## Installation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-slider",
-  "version": "0.202.2",
+  "version": "0.202.4",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.202.2",
-    "@xsolla/xui-input": "0.202.2",
-    "@xsolla/xui-primitives-core": "0.202.2"
+    "@xsolla/xui-core": "0.202.4",
+    "@xsolla/xui-input": "0.202.4",
+    "@xsolla/xui-primitives-core": "0.202.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",