Slider

Slider allows users to select a value from a continuous or discrete range. Useful for settings like volume, brightness, or any numeric preference.

Preview

Light Dark OLED

Global

---

Basic Usage

Light Dark OLED

Global

0%

50%

100%

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

<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  accessibilityLabel="Volume"
/>

---

Sizes

Light Dark OLED

Global

sm

md

lg

Size	Track	Thumb	Usage
sm	4px	16px	Compact UI
md	6px	20px	Default
lg	8px	24px	Prominent controls

---

Step Values

Use the step prop to snap to discrete values.

// Continuous (default)
<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  step={1}
  accessibilityLabel="Fine control"
/>

// Discrete steps (increments of 10)
<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  step={10}
  accessibilityLabel="Stepped control"
/>

// Large steps (e.g., ratings)
<Slider
  value={rating}
  onValueChange={setRating}
  min={1}
  max={5}
  step={1}
  accessibilityLabel="Rating"
/>

---

Custom Colors

Light Dark OLED

Global

<Slider
  value={value}
  onValueChange={setValue}
  fillColor="#d4af37"
  accessibilityLabel="Gold slider"
/>

<Slider
  value={value}
  onValueChange={setValue}
  fillColor="#10b981"
  accessibilityLabel="Success slider"
/>

---

Disabled

Light Dark OLED

Global

<Slider
  value={40}
  onValueChange={() => {}}
  disabled
  accessibilityLabel="Disabled slider"
/>

---

API Reference

Props

Prop	Type	Default	Description
value	number	Required	Current value
onValueChange	(value: number) => void	Required	Change handler
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
size	'sm' | 'md' | 'lg'	'md'	Slider size
disabled	boolean	false	Disable interaction
trackColor	string	-	Custom track color
fillColor	string	-	Custom fill color
style	ViewStyle	-	Custom styles
accessibilityLabel	string	Required	A11y label

---

Complete Example

import { Slider, Card, Text, Divider } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ReadingSettings() {
  const [fontSize, setFontSize] = useState(16);
  const [animationSpeed, setAnimationSpeed] = useState(50);
  const [hapticIntensity, setHapticIntensity] = useState(75);

  return (
    <Card>
      <Text style={styles.title}>Reading Preferences</Text>

      <View style={styles.setting}>
        <View style={styles.settingHeader}>
          <Text style={styles.label}>Font Size</Text>
          <Text style={styles.value}>{fontSize}px</Text>
        </View>
        <Slider
          value={fontSize}
          onValueChange={setFontSize}
          min={12}
          max={24}
          step={1}
          accessibilityLabel={`Font size: ${fontSize} pixels`}
        />
      </View>

      <Divider />

      <View style={styles.setting}>
        <View style={styles.settingHeader}>
          <Text style={styles.label}>Animation Speed</Text>
          <Text style={styles.value}>{animationSpeed}%</Text>
        </View>
        <Slider
          value={animationSpeed}
          onValueChange={setAnimationSpeed}
          min={0}
          max={100}
          step={10}
          accessibilityLabel={`Animation speed: ${animationSpeed} percent`}
        />
      </View>

      <Divider />

      <View style={styles.setting}>
        <View style={styles.settingHeader}>
          <Text style={styles.label}>Haptic Feedback</Text>
          <Text style={styles.value}>{hapticIntensity}%</Text>
        </View>
        <Slider
          value={hapticIntensity}
          onValueChange={setHapticIntensity}
          min={0}
          max={100}
          step={25}
          accessibilityLabel={`Haptic intensity: ${hapticIntensity} percent`}
        />
      </View>
    </Card>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 20,
  },
  setting: {
    paddingVertical: 16,
  },
  settingHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  label: {
    fontSize: 16,
  },
  value: {
    fontSize: 14,
    color: '#8a8a9a',
  },
});