MagicSlider

A flexible and customizable slider component for React with TypeScript support.

Features

• Supports both continuous and discrete values
• Customizable appearance with CSS
• Smooth animations with React Spring
• TypeScript support
• Controlled and uncontrolled modes
• Tab mode for discrete values
• Full accessibility support (ARIA attributes, keyboard navigation)
• Touch support for mobile devices

Installation

npm install react-magic-slider

Usage

import { Slider } from 'react-magic-slider'

function App() {
	const [value, setValue] = useState(50)

	return (
		<Slider
			value={value}
			onChange={setValue}
			min={0}
			max={100}
			step={1}
			label='Volume'
		/>
	)
}

Styling

The component comes with built-in styles that are automatically included. You can customize the appearance by overriding the CSS classes:

.magic-slider {
	/* Override default styles */
	background-color: #f0f0f0;
}

.magic-slider-handle {
	/* Customize handle appearance */
	background-color: #007bff;
}

Demo

The package includes a demo showcasing different slider configurations:

1. Basic Slider

   • Simple continuous slider with default behavior

   <Slider value={value} onChange={setValue} />

2. Step Slider

   • Discrete steps with min/max/step configuration

   <Slider value={value} onChange={setValue} min={1} max={5} step={1} />

3. Custom Value Display

   • Custom formatting of displayed values

   <Slider
   	value={value}
   	onChange={setValue}
   	renderValue={value => `${value}%`}
   />

4. Tab Mode

   • Predefined values with tab-like interface

   <Slider
   	value={value}
   	onChange={setValue}
   	mode='tabs'
   	values={['small', 'medium', 'large']}
   />

5. Labeled Slider

   • Slider with label and min/max constraints

   <Slider value={value} onChange={setValue} label='Volume' min={0} max={100} />

To run the demo locally:

git clone https://github.com/Heilemann/magic-slider.git
cd magic-slider
npm install
npm run dev

Props

Prop	Type	Default	Description
value	number | string	-	Controlled value
defaultValue	number | string	-	Default value for uncontrolled mode
onChange	(value: T) => void	-	Callback when value changes
label	string	-	Label text
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step size
values	T[]	-	Array of discrete values
className	string	''	Additional CSS classes
renderValue	(value: T) => React.ReactNode	-	Custom value renderer
mode	'default' | 'tabs'	'default'	Slider mode
handleSize	'fixed' | 'proportional'	'fixed'	Handle sizing mode
aria-label	string	-	Accessible label for screen readers
aria-labelledby	string	-	ID of element that labels this slider

Accessibility

The slider is fully accessible with:

• ARIA attributes: role="slider", aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext
• Keyboard navigation:
  • Arrow Left/Down: Decrease value
  • Arrow Right/Up: Increase value
  • Home: Jump to minimum
  • End: Jump to maximum
• Focus indicator: Visible focus ring when using keyboard navigation

License

MIT