react-native-multi-range-slider

A highly customizable, smooth, and performant single & multi-range slider component for React Native.

Supports dual thumbs, single thumb mode, vertical orientation, custom markers, ScrollView integration, and full TypeScript support.

---

✨ Demo

✨ Features

• 🎯 Single slider & dual thumb (range) slider
• 📏 Horizontal and Vertical modes
• 👆 Press anywhere on track to move nearest thumb
• 🎨 Fully customizable track, selected range & markers
• 🧩 Universal custom marker
• 🔀 Separate custom Left & Right markers
• 📜 Optional ScrollView integration via scrollRef
• ⚡ Highly smooth and responsive interactions
• 🧠 TypeScript support
• 📱 Works on both iOS and Android

---

📦 Installation

npm install react-native-multi-range-slider

or

yarn add react-native-multi-range-slider

---

🚀 Basic Usage (Multi Slider)

import React, { useState } from "react";
import { View, Text } from "react-native";
import MultiRangeSlider from "react-native-multi-range-slider";

const Example = () => {
  const [range, setRange] = useState<[number, number]>([20, 80]);

  return (
    <View style={{ padding: 20 }}>
      <Text>
        Selected: {range[0]} - {range[1]}
      </Text>

      <MultiRangeSlider
        min={0}
        max={100}
        values={range}
        onValuesChange={setRange}
      />
    </View>
  );
};

export default Example;

---

🎯 Single Slider Mode

Pass a single value in values:

<MultiRangeSlider
  min={0}
  max={100}
  values={[50]}
  onValuesChange={(values) => console.log(values)}
/>

---

📏 Vertical Mode

<MultiRangeSlider
  min={0}
  max={100}
  values={[20, 70]}
  vertical
  sliderLength={300}
/>

Perfect for:

• Volume control
• Brightness control
• Temperature selector
• Vertical filter UI

---

🎨 Customization

Track & Thumb Styling

<MultiRangeSlider
  values={[20, 80]}
  trackStyle={{
    height: 6,
    backgroundColor: "#E0E0E0",
    borderRadius: 3,
  }}
  selectedTrackStyle={{
    backgroundColor: "#3B82F6",
  }}
  thumbStyle={{
    height: 24,
    width: 24,
    borderRadius: 12,
    backgroundColor: "#1D4ED8",
  }}
/>

---

🧩 Custom Markers

Universal Custom Marker

<MultiRangeSlider
  values={[20, 80]}
  customMarker={(value) => (
    <View style={{ backgroundColor: "black", padding: 6, borderRadius: 10 }}>
      <Text style={{ color: "white" }}>{value}</Text>
    </View>
  )}
/>

---

Separate Left & Right Markers

<MultiRangeSlider
  values={[20, 80]}
  customLeftMarker={(value) => (
    <View style={{ backgroundColor: "blue", padding: 8 }} />
  )}
  customRightMarker={(value) => (
    <View style={{ backgroundColor: "red", padding: 8 }} />
  )}
/>

---

📜 ScrollView Support (Advanced)

When using inside a ScrollView, pass its ref to prevent gesture conflicts:

import React, { useRef } from "react";
import { ScrollView } from "react-native";

const scrollRef = useRef(null);

<ScrollView ref={scrollRef}>
  <MultiRangeSlider
    values={[20, 80]}
    scrollRef={scrollRef}
  />
</ScrollView>

This ensures smooth slider interaction without blocking scroll gestures.

---

🎛 Events

onValuesChangeStart

Triggered when user starts dragging a thumb.

onValuesChangeStart={(values) => {
  console.log("Drag started", values);
}}

Use case:

• Disable expensive operations
• Start analytics tracking
• Pause network updates

---

onValuesChange

Triggered continuously while dragging.

onValuesChange={(values) => {
  console.log("Changing", values);
}}

Use case:

• Live UI updates
• Dynamic filtering
• Real-time value display

---

onValuesChangeFinish

Triggered when user releases the thumb.

onValuesChangeFinish={(values) => {
  console.log("Drag finished", values);
}}

Use case:

• API calls
• Final state persistence
• Trigger heavy calculations

---

⚙️ Props

Prop	Default	Type	Description
min	0	number	Minimum value of the slider
max	100	number	Maximum value of the slider
step	1	number	Step increment between values
values	Required	number[]	Array of values (single value for single slider, two values for range slider)
sliderLength	280	number	Length of the slider (width for horizontal, height for vertical)
vertical	false	boolean	Enables vertical slider mode
trackStyle	—	ViewStyle	Style for the base track
selectedTrackStyle	—	ViewStyle	Style for the selected range track
thumbStyle	—	ViewStyle	Default thumb styling
customMarker	—	(value: number) => ReactNode	Universal custom marker for both thumbs
customLeftMarker	—	(value: number) => ReactNode	Custom marker for left thumb (range mode)
customRightMarker	—	(value: number) => ReactNode	Custom marker for right thumb (range mode)
scrollRef	—	RefObject<ScrollView>	ScrollView reference to handle gesture conflicts
onValuesChangeStart	—	(values: number[]) => void	Called when user starts dragging
onValuesChange	—	(values: number[]) => void	Called continuously while dragging
onValuesChangeFinish	—	(values: number[]) => void	Called when user releases the thumb

---

🏆 Why This Slider?

• Extremely smooth interaction
• Highly customizable
• Flexible single & range mode
• Production-ready
• Type-safe
• Lightweight
• No heavy dependencies

---

⭐ Support

If you like this package, please consider giving it a star on GitHub!

🤝 Contributing

Pull requests, bug reports, and feature suggestions welcome! Open an issue

---

🧑‍💻 Author

Made with ❤️ by Antos Maman

• GitHub: @antosmamanktr
• Email: [email protected]

---

📄 License

MIT License