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

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 |

License

MIT