Value selection slider with iOS styling
1npm install @openwebf/react-cupertino-ui1import { useState } from 'react';
2import { FlutterCupertinoSlider } from '@openwebf/react-cupertino-ui';
3
4export function SliderExample() {
5 const [value, setValue] = useState(50);
6
7 return (
8 <FlutterCupertinoSlider
9 val={value}
10 min={0}
11 max={100}
12 onChange={(e) => setValue(e.detail)}
13 />
14 );
15}| Name | Type | Default | Description |
|---|---|---|---|
| val | number | 0 | Current slider value. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | - | Discrete divisions (omit for continuous). |
| disabled | boolean | false | Disable interactions. |
| Name | Type | Default | Description |
|---|---|---|---|
| onChange | (event: CustomEvent<number>) => void | - | Fires on value changes (`event.detail`). |
| onChangestart | (event: CustomEvent<number>) => void | - | Fires when drag starts. |
| onChangeend | (event: CustomEvent<number>) => void | - | Fires when drag ends. |