@xsolla/xui-slider 0.99.0 → 0.100.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +332 -19
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,41 +1,354 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Slider
|
|
3
|
+
subtitle: A slider for selecting numeric values.
|
|
4
|
+
description: A cross-platform React slider component for selecting values within a range, with optional range mode and input fields.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
Slider
|
|
7
|
+
# Slider
|
|
8
|
+
|
|
9
|
+
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.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-slider
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-slider
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Slider
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
26
|
+
|
|
27
|
+
export default function BasicSlider() {
|
|
28
|
+
const [value, setValue] = React.useState(50);
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<Slider
|
|
32
|
+
value={value}
|
|
33
|
+
onChange={setValue}
|
|
34
|
+
min={0}
|
|
35
|
+
max={100}
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Slider with Label
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import * as React from 'react';
|
|
45
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
46
|
+
|
|
47
|
+
export default function SliderWithLabel() {
|
|
48
|
+
const [volume, setVolume] = React.useState(75);
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<Slider
|
|
52
|
+
value={volume}
|
|
53
|
+
onChange={setVolume}
|
|
54
|
+
min={0}
|
|
55
|
+
max={100}
|
|
56
|
+
label={`Volume: ${volume}%`}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Range Slider
|
|
12
63
|
|
|
13
64
|
```tsx
|
|
65
|
+
import * as React from 'react';
|
|
14
66
|
import { Slider } from '@xsolla/xui-slider';
|
|
15
67
|
|
|
68
|
+
export default function RangeSlider() {
|
|
69
|
+
const [minPrice, setMinPrice] = React.useState(20);
|
|
70
|
+
const [maxPrice, setMaxPrice] = React.useState(80);
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Slider
|
|
74
|
+
range
|
|
75
|
+
minValue={minPrice}
|
|
76
|
+
maxValue={maxPrice}
|
|
77
|
+
onRangeChange={(min, max) => {
|
|
78
|
+
setMinPrice(min);
|
|
79
|
+
setMaxPrice(max);
|
|
80
|
+
}}
|
|
81
|
+
min={0}
|
|
82
|
+
max={100}
|
|
83
|
+
label="Price Range"
|
|
84
|
+
minThumbAriaLabel="Minimum price"
|
|
85
|
+
maxThumbAriaLabel="Maximum price"
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Slider with Input Fields
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import * as React from 'react';
|
|
95
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
96
|
+
|
|
97
|
+
export default function SliderWithInputs() {
|
|
98
|
+
const [value, setValue] = React.useState(50);
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<Slider
|
|
102
|
+
value={value}
|
|
103
|
+
onChange={setValue}
|
|
104
|
+
min={0}
|
|
105
|
+
max={100}
|
|
106
|
+
inputPosition="right"
|
|
107
|
+
label="Brightness"
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Range Slider with Both Inputs
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import * as React from 'react';
|
|
117
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
118
|
+
|
|
119
|
+
export default function RangeSliderWithInputs() {
|
|
120
|
+
const [min, setMin] = React.useState(1000);
|
|
121
|
+
const [max, setMax] = React.useState(5000);
|
|
122
|
+
|
|
123
|
+
return (
|
|
124
|
+
<Slider
|
|
125
|
+
range
|
|
126
|
+
minValue={min}
|
|
127
|
+
maxValue={max}
|
|
128
|
+
onRangeChange={(minVal, maxVal) => {
|
|
129
|
+
setMin(minVal);
|
|
130
|
+
setMax(maxVal);
|
|
131
|
+
}}
|
|
132
|
+
min={0}
|
|
133
|
+
max={10000}
|
|
134
|
+
step={100}
|
|
135
|
+
inputPosition="both"
|
|
136
|
+
label="Budget Range"
|
|
137
|
+
minThumbAriaLabel="Minimum budget"
|
|
138
|
+
maxThumbAriaLabel="Maximum budget"
|
|
139
|
+
/>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Anatomy
|
|
145
|
+
|
|
146
|
+
Import the component and use it directly:
|
|
147
|
+
|
|
148
|
+
```jsx
|
|
149
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
150
|
+
|
|
151
|
+
// Single value slider
|
|
152
|
+
<Slider
|
|
153
|
+
value={value} // Current value
|
|
154
|
+
onChange={handleChange} // Value change handler
|
|
155
|
+
min={0} // Minimum bound
|
|
156
|
+
max={100} // Maximum bound
|
|
157
|
+
step={1} // Step increment
|
|
158
|
+
label="Label" // Label above slider
|
|
159
|
+
inputPosition="none" // Input field position
|
|
160
|
+
showLabels={false} // Show min/max labels
|
|
161
|
+
disabled={false} // Disabled state
|
|
162
|
+
activeColor="brand" // Color scheme
|
|
163
|
+
/>
|
|
164
|
+
|
|
165
|
+
// Range slider
|
|
16
166
|
<Slider
|
|
17
|
-
|
|
167
|
+
range // Enable range mode
|
|
168
|
+
minValue={minVal} // Minimum selected value
|
|
169
|
+
maxValue={maxVal} // Maximum selected value
|
|
170
|
+
onRangeChange={handleRange} // Range change handler
|
|
18
171
|
min={0}
|
|
19
172
|
max={100}
|
|
20
|
-
onChange={setVolume}
|
|
21
|
-
showLabels
|
|
22
|
-
inputPosition="right"
|
|
23
173
|
/>
|
|
24
174
|
```
|
|
25
175
|
|
|
26
|
-
##
|
|
176
|
+
## Examples
|
|
177
|
+
|
|
178
|
+
### Slider Sizes
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import * as React from 'react';
|
|
182
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
183
|
+
|
|
184
|
+
export default function SliderSizes() {
|
|
185
|
+
return (
|
|
186
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
|
187
|
+
<Slider value={50} size="sm" label="Small" />
|
|
188
|
+
<Slider value={50} size="md" label="Medium (default)" />
|
|
189
|
+
<Slider value={50} size="lg" label="Large" />
|
|
190
|
+
<Slider value={50} size="xl" label="Extra Large" />
|
|
191
|
+
</div>
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
### Color Schemes
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
import * as React from 'react';
|
|
200
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
201
|
+
|
|
202
|
+
export default function SliderColors() {
|
|
203
|
+
return (
|
|
204
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
|
205
|
+
<Slider value={60} activeColor="brand" label="Brand" />
|
|
206
|
+
<Slider value={60} activeColor="brandExtra" label="Brand Extra" />
|
|
207
|
+
<Slider value={60} activeColor="success" label="Success" />
|
|
208
|
+
<Slider value={60} activeColor="warning" label="Warning" />
|
|
209
|
+
<Slider value={60} activeColor="alert" label="Alert" />
|
|
210
|
+
<Slider value={60} activeColor="neutral" label="Neutral" />
|
|
211
|
+
</div>
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Slider with Icons
|
|
217
|
+
|
|
218
|
+
```tsx
|
|
219
|
+
import * as React from 'react';
|
|
220
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
221
|
+
import { Volume1, Volume2 } from '@xsolla/xui-icons-base';
|
|
222
|
+
|
|
223
|
+
export default function SliderWithIcons() {
|
|
224
|
+
const [value, setValue] = React.useState(50);
|
|
225
|
+
|
|
226
|
+
return (
|
|
227
|
+
<Slider
|
|
228
|
+
value={value}
|
|
229
|
+
onChange={setValue}
|
|
230
|
+
min={0}
|
|
231
|
+
max={100}
|
|
232
|
+
iconLeft={<Volume1 />}
|
|
233
|
+
iconRight={<Volume2 />}
|
|
234
|
+
/>
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Step Slider
|
|
240
|
+
|
|
241
|
+
```tsx
|
|
242
|
+
import * as React from 'react';
|
|
243
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
244
|
+
|
|
245
|
+
export default function StepSlider() {
|
|
246
|
+
const [value, setValue] = React.useState(50);
|
|
247
|
+
|
|
248
|
+
return (
|
|
249
|
+
<Slider
|
|
250
|
+
value={value}
|
|
251
|
+
onChange={setValue}
|
|
252
|
+
min={0}
|
|
253
|
+
max={100}
|
|
254
|
+
step={10}
|
|
255
|
+
showLabels
|
|
256
|
+
label={`Value: ${value}`}
|
|
257
|
+
/>
|
|
258
|
+
);
|
|
259
|
+
}
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### Disabled Slider
|
|
263
|
+
|
|
264
|
+
```tsx
|
|
265
|
+
import * as React from 'react';
|
|
266
|
+
import { Slider } from '@xsolla/xui-slider';
|
|
267
|
+
|
|
268
|
+
export default function DisabledSlider() {
|
|
269
|
+
return (
|
|
270
|
+
<Slider
|
|
271
|
+
value={50}
|
|
272
|
+
min={0}
|
|
273
|
+
max={100}
|
|
274
|
+
disabled
|
|
275
|
+
label="Disabled slider"
|
|
276
|
+
/>
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
## API Reference
|
|
27
282
|
|
|
28
283
|
### Slider
|
|
29
284
|
|
|
285
|
+
A slider component for value selection.
|
|
286
|
+
|
|
287
|
+
**Slider Props:**
|
|
288
|
+
|
|
30
289
|
| Prop | Type | Default | Description |
|
|
31
|
-
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
290
|
+
| :--- | :--- | :------ | :---------- |
|
|
291
|
+
| value | `number` | `0` | Current value (single slider mode). |
|
|
292
|
+
| minValue | `number` | - | Minimum value (range mode). |
|
|
293
|
+
| maxValue | `number` | - | Maximum value (range mode). |
|
|
294
|
+
| min | `number` | `0` | Minimum bound of the slider. |
|
|
295
|
+
| max | `number` | `100` | Maximum bound of the slider. |
|
|
296
|
+
| step | `number` | `1` | Step increment for value changes. |
|
|
297
|
+
| onChange | `(value: number) => void` | - | Callback for single value changes. |
|
|
298
|
+
| onRangeChange | `(min: number, max: number) => void` | - | Callback for range value changes. |
|
|
299
|
+
| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the slider. |
|
|
300
|
+
| disabled | `boolean` | `false` | Whether the slider is disabled. |
|
|
301
|
+
| range | `boolean` | `false` | Enable range mode with two thumbs. |
|
|
302
|
+
| inputPosition | `"left" \| "right" \| "both" \| "none"` | `"none"` | Position of input field(s). |
|
|
303
|
+
| showLabels | `boolean` | `false` | Show min/max labels. |
|
|
304
|
+
| label | `string` | - | Label displayed above the slider. |
|
|
305
|
+
| activeColor | `"brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"brand"` | Color scheme for the active track. |
|
|
306
|
+
| iconLeft | `ReactNode` | - | Icon on the left side. |
|
|
307
|
+
| iconRight | `ReactNode` | - | Icon on the right side. |
|
|
308
|
+
| iconInside | `ReactNode` | - | Icon inside input field. |
|
|
309
|
+
| iconInsidePosition | `"left" \| "right"` | - | Position of icon inside input. |
|
|
310
|
+
| aria-label | `string` | - | Accessible label. |
|
|
311
|
+
| minThumbAriaLabel | `string` | `"Minimum value"` | Label for min thumb in range mode. |
|
|
312
|
+
| maxThumbAriaLabel | `string` | `"Maximum value"` | Label for max thumb in range mode. |
|
|
313
|
+
| testID | `string` | - | Test identifier. |
|
|
314
|
+
|
|
315
|
+
**Size Configuration:**
|
|
316
|
+
|
|
317
|
+
| Size | Height | Track Height | Thumb Size | Input Width |
|
|
318
|
+
| :--- | :----- | :----------- | :--------- | :---------- |
|
|
319
|
+
| sm | 32px | 4px | 14px | 48px |
|
|
320
|
+
| md | 40px | 6px | 16px | 56px |
|
|
321
|
+
| lg | 48px | 6px | 18px | 64px |
|
|
322
|
+
| xl | 56px | 8px | 20px | 72px |
|
|
323
|
+
|
|
324
|
+
## Keyboard Navigation
|
|
325
|
+
|
|
326
|
+
| Key | Action |
|
|
327
|
+
| :-- | :----- |
|
|
328
|
+
| Arrow Right/Up | Increase value by step |
|
|
329
|
+
| Arrow Left/Down | Decrease value by step |
|
|
330
|
+
| Shift + Arrow | Increase/decrease by 10x step |
|
|
331
|
+
| Home | Jump to minimum value |
|
|
332
|
+
| End | Jump to maximum value |
|
|
333
|
+
|
|
334
|
+
## Theming
|
|
335
|
+
|
|
336
|
+
Slider uses the design system theme for colors:
|
|
337
|
+
|
|
338
|
+
```typescript
|
|
339
|
+
// Colors accessed via theme
|
|
340
|
+
theme.colors.control.slider.track // Inactive track
|
|
341
|
+
theme.colors.control.slider.trackActive // Active track (uses activeColor)
|
|
342
|
+
theme.colors.control.slider.thumb // Thumb color
|
|
343
|
+
theme.colors.control.slider.thumbBorder // Thumb border
|
|
344
|
+
theme.colors.content.primary // Label text
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
## Accessibility
|
|
348
|
+
|
|
349
|
+
- Uses `role="slider"` semantic role
|
|
350
|
+
- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for current state
|
|
351
|
+
- Full keyboard navigation support
|
|
352
|
+
- Focus indicator follows WCAG guidelines
|
|
353
|
+
- Range mode has separate labels for min/max thumbs
|
|
354
|
+
- Disabled state properly announced
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-slider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-input": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.100.0",
|
|
17
|
+
"@xsolla/xui-input": "0.100.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|