Components
Slider
WEB APPROXIMATION — Slider wraps @react-native-community/slider, which is a native view on iOS and Android.
What renders here is react-native-web's fallback: the geometry and the tint colours are indicative, the thumb and the drag feel are not. Verify on a simulator.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Slider } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
value | — | — | Current position. Controlled — hold it in state and update from onValueChange, or the thumb springs back. |
minimumValue | — | — | Lower bound. Defaults to 0. |
maximumValue | — | — | Upper bound. Defaults to 1, which is why an unconfigured slider works in fractions. |
step | — | — | Snap increment. 0 (the default) slides continuously. |
onValueChange | — | — | Fires continuously while dragging, not just on release. Debounce it before doing real work. |
disabled | boolean | false | Blocks dragging and dims the track. |
Examples
Interactive
{
function Controlled() {
const [value, setValue] = React.useState(0.25);
return (
<View className="gap-3">
<Slider {...args} value={value} onValueChange={setValue} />
<Text variant="footnote" color="tertiary">
{Math.round(value * 100)}
% selected
</Text>
</View>
);
}
return <Controlled />;
}Stepped
<Slider
value={6}
minimumValue={0}
maximumValue={12}
step={1}
/>