MultiSliderPro Component

A fully customizable, accessible React multi-range slider component with keyboard support and mobile compatibility.

Full Documentation

Features

• ✅ Multiple Handles: Support for 2 or more handles
• ✅ Keyboard Navigation: Full keyboard support with arrow keys, home/end, page up/down
• ✅ Mobile Friendly: Touch events and responsive design
• ✅ Accessibility: ARIA labels, screen reader support, and keyboard navigation
• ✅ Fully Customizable: Colors, sizes, formatting, and behavior via props
• ✅ Marks Support: Visual indicators with custom labels
• ✅ Handle Constraints: Prevent crossing and set minimum distance between handles
• ✅ Event Callbacks: onChange and onChangeCommitted events
• ✅ TypeScript Ready: (types can be added easily)

Installation

npm i react-multi-slider-pro
# or
yarn add react-multi-slider-pro

Basic Usage

import React, { useState } from 'react';
import { MultiSliderPro } from 'react-multi-slider-pro';

function App() {
  const [values, setValues] = useState([20, 80]);

  return (
    <div>
      <MultiSliderPro
        values={values}
        onChange={setValues}
        min={0}
        max={100}
        showLabels
        showValueLabels
      />
      <p>Selected range: {values[0]} - {values[1]}</p>
    </div>
  );
}

Props

Prop	Type	Default	Description
values	number[]	[20, 80]	Array of handle values
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step size for value changes
disabled	boolean	false	Disable the slider
onChange	(values: number[]) => void	-	Called when values change
onChangeCommitted	(values: number[]) => void	-	Called when user finishes changing values
showLabels	boolean	false	Show min/max labels and value chips
showValueLabels	boolean	false	Show value labels above handles
formatLabel	(value: number) => string	-	Custom value formatting function
trackColor	string	'bg-gray-300'	Tailwind class for track color
rangeColor	string	'bg-blue-500'	Tailwind class for range color
handleColor	string	'bg-blue-500'	Tailwind class for handle color
labelColor	string	'text-white'	Tailwind class for label text color
trackHeight	string	'h-1'	Tailwind class for track height
handleSize	string	'w-5 h-5'	Tailwind class for handle size
containerHeight	string	'h-10'	Tailwind class for container height
marks	Mark[]	[]	Array of marks to display
allowCross	boolean	false	Allow handles to cross each other
pushable	number	0	Minimum distance between handles
className	string	''	Additional CSS classes
style	object	{}	Inline styles
aria-label	string	'Multi-range slider'	Accessibility label
aria-labelledby	string	-	ID of element that labels the slider

Mark Object

interface Mark {
  value: number;
  label?: string;
}

Examples

Basic Two-Handle Range Slider

const [priceRange, setPriceRange] = useState([25, 75]);

<MultiSliderPro
  values={priceRange}
  onChange={setPriceRange}
  min={0}
  max={100}
  showLabels
  showValueLabels
  formatLabel={(value) => `$${value}`}
  aria-label="Price range selector"
/>

Three-Handle Slider with Custom Styling

const [values, setValues] = useState([20, 50, 80]);

<MultiSliderPro
  values={values}
  onChange={setValues}
  rangeColor="bg-red-500"
  handleColor="bg-red-500"
  trackHeight="h-2"
  handleSize="w-6 h-6"
  showValueLabels
/>

Slider with Marks

const marks = [
  { value: 0, label: 'Min' },
  { value: 25, label: '25%' },
  { value: 50, label: 'Mid' },
  { value: 75, label: '75%' },
  { value: 100, label: 'Max' }
];

<MultiSliderPro
  values={[30, 70]}
  marks={marks}
  showLabels
  step={5}
/>

Controlled vs Uncontrolled

// Controlled (recommended)
const [values, setValues] = useState([20, 80]);
<MultiSliderPro values={values} onChange={setValues} />

// With commit handler for API calls
<MultiSliderPro
  values={values}
  onChange={setValues} // Real-time updates
  onChangeCommitted={(finalValues) => {
    // Call API when user finishes dragging
    updateFilters(finalValues);
  }}
/>

Keyboard Controls

Key	Action
← ↓	Move handle left/down by step
→ ↑	Move handle right/up by step
Shift + ←↓→↑	Move handle by large step (10% of range)
Home	Move handle to minimum value
End	Move handle to maximum value
Page Down	Move handle down by large step
Page Up	Move handle up by large step
Tab	Navigate between handles

Accessibility

The component follows WAI-ARIA guidelines:

• Each handle has role="slider"
• Proper aria-valuemin, aria-valuemax, and aria-valuenow attributes
• Keyboard navigation support
• Screen reader announcements
• Focus management

<MultiSliderPro
  aria-label="Temperature range"
  aria-labelledby="temp-label"
  values={[18, 24]}
/>

Styling Customization

The component uses Tailwind CSS classes for styling. You can customize:

Colors

<MultiSliderPro
  trackColor="bg-gray-200"
  rangeColor="bg-purple-500"
  handleColor="bg-purple-600"
/>

Sizes

<MultiSliderPro
  trackHeight="h-3"
  handleSize="w-8 h-8"
  containerHeight="h-12"
/>

Custom CSS

<MultiSliderPro
  className="my-custom-slider"
  style={{ marginTop: '20px' }}
/>

Handle Behavior

Prevent Crossing

<MultiSliderPro
  allowCross={false} // Handles cannot pass each other
  pushable={5}       // Minimum 5-unit gap between handles
/>

Allow Crossing

<MultiSliderPro
  allowCross={true} // Handles can cross each other
/>

Browser Support

• Chrome/Chromium 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Mobile browsers (iOS Safari, Chrome Mobile)

Dependencies

• React 16.8+ (hooks support)
• Tailwind CSS 2.0+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - feel free to use in your projects!

Support This Project

If you find this component helpful, please consider supporting its development:

💖 Sponsor the Project

Your sponsorship helps maintain and improve this component. Support the developer:

• GitHub Sponsors - One-time or monthly support

🌟 Other Ways to Help

• ⭐ Star this repository on GitHub
• 🐛 Report bugs and issues
• 💡 Suggest new features and improvements
• 📢 Share this component with others
• 💻 Contribute code improvements

Your support makes a difference! Every contribution helps keep this project alive and continuously improved.

Changelog

v1.0.0

• Initial release
• Multiple handle support
• Keyboard navigation
• Mobile touch support
• Full accessibility
• Customizable styling
• Marks support