@xsolla/xui-slider 0.174.2 → 0.175.0

package/README.md

@@ -1,6 +1,61 @@
 # Slider
 
 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.
+
+### 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)
+- 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 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 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.
+
+### 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.
+
+### 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.
+<!-- END:xui-mcp-instructions:slider -->
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-slider",
-  "version": "0.174.2",
+  "version": "0.175.0",
   "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.174.2",
-    "@xsolla/xui-input": "0.174.2",
-    "@xsolla/xui-primitives-core": "0.174.2"
+    "@xsolla/xui-core": "0.175.0",
+    "@xsolla/xui-input": "0.175.0",
+    "@xsolla/xui-primitives-core": "0.175.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",