Slider Component

A comprehensive and highly customizable slider component for React Native with support for single values, ranges, and various interactive features built with React Native Gesture Handler and Reanimated.

Features

🎯 Multiple Variants - Single, Range, Fixed, and FixedRange sliders
🎨 Highly Customizable - Extensive styling options for all elements
✋ Gesture Support - Smooth touch interactions with gesture handling
📊 Track Points - Optional visual indicators along the track
🎪 Smooth Animations - Built with React Native Reanimated for performance
🔧 Flexible Configuration - Support for steps, custom thumbs, and more
♿ Accessibility Ready - Screen reader support and proper semantics

Installation

💻Bash

npm install rn-base-component react-native-gesture-handler react-native-reanimated
# or
yarn add rn-base-component react-native-gesture-handler react-native-reanimated

Dependencies Required

Make sure to complete the installation of React Native Gesture Handler and Reanimated following their official documentation.

Basic Usage

Single Value Slider

⚛️TSX

import React from 'react'
import { Slider } from 'rn-base-component'

export default function App() {
  return (
     console.log('Value:', value)}
    />
  )
}

Range Slider

⚛️TSX

import React, { useState } from 'react'
import { Slider } from 'rn-base-component'

export default function RangeSlider() {
  const [range, setRange] = useState([25, 75])

  return (
    
  )
}

Advanced Usage

Custom Styling

⚛️TSX

 console.log(value)}
/>

const styles = StyleSheet.create({
  thumb: {
    backgroundColor: '#007AFF',
    borderWidth: 2,
    borderColor: '#ffffff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 4,
  },
  track: {
    borderRadius: 3,
  },
})

Step-based Slider

⚛️TSX

 console.log('Step:', value)}
  thumbStyle={styles.stepThumb}
/>

Volume Control

⚛️TSX

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { Slider } from 'rn-base-component'

export default function VolumeControl() {
  const [volume, setVolume] = useState(50)

  return (
    
      Volume: {volume}%
      
    
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 10,
    textAlign: 'center',
  },
  volumeThumb: {
    backgroundColor: '#4CAF50',
  },
})

API Reference

Slider Props

Prop	Type	Default	Description
`minimumValue`	`number`	`0`	Minimum value of the slider
`maximumValue`	`number`	`1`	Maximum value of the slider
`value`	`number`	`0`	Current value (controlled)
`onValueChange`	`(value: number) => void`	`undefined`	Callback when value changes
`step`	`number`	`0`	Step value for discrete sliders
`thumbSize`	`number`	`20`	Size of the thumb
`trackHeight`	`number`	`4`	Height of the track
`minimumTrackTintColor`	`string`	`#007AFF`	Color of the minimum track
`maximumTrackTintColor`	`string`	`#E5E5E5`	Color of the maximum track
`thumbStyle`	`StyleProp<ViewStyle>`	`undefined`	Custom style for the thumb
`trackStyle`	`StyleProp<ViewStyle>`	`undefined`	Custom style for the track
`showTrackPoints`	`boolean`	`false`	Show points along the track
`disabled`	`boolean`	`false`	Disable the slider

Range Slider Props

Prop	Type	Default	Description
`low`	`number`	`0`	Lower bound value
`high`	`number`	`1`	Upper bound value
`onValueChange`	`(low: number, high: number) => void`	`undefined`	Callback when range changes
`minRange`	`number`	`0`	Minimum range between bounds

Performance

The slider uses React Native Reanimated for smooth 60fps animations and gesture handling.

Common Use Cases

Price Range Filter

⚛️TSX

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { Slider } from 'rn-base-component'

export default function PriceFilter() {
  const [priceRange, setPriceRange] = useState([100, 500])

  return (
    
      Price Range
      
        ${priceRange[0]} - ${priceRange[1]}
      
      
      
    
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  range: {
    fontSize: 16,
    color: '#666',
    marginBottom: 20,
    textAlign: 'center',
  },
  priceThumb: {
    backgroundColor: '#FF6B6B',
    borderWidth: 2,
    borderColor: '#fff',
  },
})

Audio Progress

⚛️TSX

import React, { useState, useEffect } from 'react'
import { View, Text } from 'react-native'
import { Slider, Button } from 'rn-base-component'

export default function AudioPlayer() {
  const [progress, setProgress] = useState(0)
  const [duration] = useState(180) // 3 minutes
  const [isPlaying, setIsPlaying] = useState(false)

  useEffect(() => {
    let interval
    if (isPlaying) {
      interval = setInterval(() => {
        setProgress(prev => Math.min(prev + 1, duration))
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isPlaying, duration])

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  return (
    
      Now Playing
      
      
      
      
        {formatTime(progress)}
        {formatTime(duration)}
      
      
      
    
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f8f9fa',
    borderRadius: 12,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: 20,
  },
  timeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
    marginBottom: 20,
  },
  time: {
    fontSize: 12,
    color: '#666',
  },
  playButton: {
    alignSelf: 'center',
  },
})

Settings Slider

⚛️TSX


  Brightness
  
  {brightness}%

Best Practices

Appropriate Range - Set meaningful minimum and maximum values
Step Values - Use steps for discrete values or when precision isn't needed
Visual Feedback - Provide clear visual indication of current value
Responsive Design - Ensure adequate touch targets (minimum 44px)
Accessibility - Provide proper accessibility labels and hints
Performance - Use onSlidingComplete for expensive operations
Consistent Styling - Maintain consistent slider appearance across the app

Gesture Conflicts

Be careful when using sliders inside ScrollViews or other gesture-responsive components to avoid conflicts.