React Range Slider Advanced 🎚️

A modern, customizable, and interactive Range Slider component for React applications with support for multi-range selection, value grids, and adaptive UI.

🌟 Features

• Fully customizable appearance
• Touch device support
• Adaptive value labels
• Customizable value grid
• Smooth drag animation
• Mobile-optimized

Example - CodeSandbox

📦 Installation

npm install react-range-slider-advanced
# or
yarn add react-range-slider-advanced

🚀 Quick Start

import React from "react";
import {
  DoubleRangeSlider,
  SimpleRangeSlider,
} from "react-range-slider-advanced";
import "react-range-slider-advanced/style.css";
function App() {
  const min = 0;
  const max = 10000;
  return (
    <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
      <h1>React Range Slider Example</h1>
      <DoubleRangeSlider
        min={min}
        max={max}
        from={min}
        to={max}
        step={10}
        numberOfSections={10}
        separator=","
        prefix="P"
        postfix="k"
        valuesSeparator='-'
        onFinish={({ from, to }) => console.log("Selected range:", from, to)}
      />
      <SimpleRangeSlider
        min={min}
        max={max}
        value={min}
        step={10}
        numberOfSections={10}
        separator=" "
        postfix="$"
        onFinish={(val) => console.log("Selected range:", val)}
      />
    </div>
  );
}

export default App;

⚙️ Props

SimpleRangeSlider 🎚️

Argument	Type	Default	Description
min	number	0	Minimum value
max	number	100	Maximum value
value	number	10	Initial value
step	number	10	Value change step
numberOfSections	number	10	Number of main grid divisions
separator	string		Numbers separator
prefix	string	``	Symbol before value
postfix	string	``	Symbol after value
onFinish	function	``	Callback when range is changed

DoubleRangeSlider 🎚️🎚️

Argument	Type	Default	Description
min	number	0	Minimum value
max	number	100	Maximum value
from	number	10	Initial "from" value
to	number	90	Initial "to" value
step	number	10	Value change step
numberOfSections	number	10	Number of main grid divisions
separator	string		Numbers separator
valuesSeparator	string	-	Separator between values
prefix	string	``	Symbol before value
postfix	string	``	Symbol after value
onFinish	function	``	Callback when range is changed