managarten/apps/picture/packages/mobile-ui/components/ui/Slider

Slider

Interactive slider component with smooth animations.

Features

• ✅ Smooth pan and tap gestures
• ✅ Animated thumb and track
• ✅ Custom colors
• ✅ Configurable min/max values
• ✅ Built with Reanimated v3

Installation

npx @memoro/ui add slider

Dependencies:

• react-native-reanimated
• react-native-gesture-handler

Usage

Basic Slider

import { Slider } from '@/components/ui/Slider';
import { useState } from 'react';

function MyComponent() {
	const [value, setValue] = useState(50);

	return <Slider minimumValue={0} maximumValue={100} value={value} onValueChange={setValue} />;
}

Custom Colors

<Slider
	minimumValue={0}
	maximumValue={100}
	value={value}
	onValueChange={setValue}
	minimumTrackTintColor="#3B82F6"
	maximumTrackTintColor="#D1D5DB"
	thumbTintColor="#2563EB"
/>

Volume Control

const [volume, setVolume] = useState(50);

<Slider
	minimumValue={0}
	maximumValue={100}
	value={volume}
	onValueChange={setVolume}
	minimumTrackTintColor="#10B981"
	thumbTintColor="#059669"
/>;

Props

Prop	Type	Default	Description
minimumValue	number	-	Required - Minimum value
maximumValue	number	-	Required - Maximum value
value	number	-	Required - Current value
onValueChange	(value: number) => void	-	Required - Value change callback
minimumTrackTintColor	string	'#6366f1'	Filled track color
maximumTrackTintColor	string	'#374151'	Unfilled track color
thumbTintColor	string	'#818cf8'	Thumb color
style	ViewStyle	-	Additional container styles

Default Colors

• Filled Track: #6366f1 (indigo-500)
• Unfilled Track: #374151 (gray-700)
• Thumb: #818cf8 (indigo-400)

Gestures

• Pan: Drag thumb to change value
• Tap: Tap anywhere on track to jump to value

Dependencies

Requires:

• react-native-reanimated (v3+)
• react-native-gesture-handler (v2+)

Notes

• Thumb is 24x24px
• Track is 4px high
• Container is 40px high for easy touch
• Smooth animations with Reanimated
• Auto-updates when value prop changes