npm package: @sudheer1718/slider-component
Description: A beautiful, flexible, and reusable React slider component with exact design specifications
Latest version: 1.0.0

# React Progress Slider Component

A beautiful, flexible, and reusable React slider component built with TypeScript. Features exact design specifications for a premium UI experience.

![Slider Component](https://img.shields.io/badge/React-18+-blue) ![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue) ![License](https://img.shields.io/badge/license-MIT-green)

## Features

✨ **Pixel-Perfect Design** - Built to exact specifications  
🎨 **Customizable** - Override colors, width, and more  
📱 **Touch Support** - Works seamlessly on mobile devices  
⌨️ **Keyboard Accessible** - Full keyboard navigation support  
🎯 **TypeScript** - Fully typed for better DX  
📦 **Zero Dependencies** - Lightweight and performant  

## Installation

```bash
npm install @react-slider/progress-component
```

or with yarn:

```bash
yarn add @react-slider/progress-component
```

## Quick Start

```tsx
import React, { useState } from 'react';
import { Slider } from '@react-slider/progress-component';
import '@react-slider/progress-component/dist/style.css';

function App() {
  const [value, setValue] = useState(50);

  return (
    <div>
      <Slider value={value} onChange={setValue} />
      <p>Value: {value}</p>
    </div>
  );
}
```

## Component Specifications

| Property | Value | Description |
|----------|-------|-------------|
| Width | 520px | Standard width for slider track |
| Track Height | 8px | Visual height of slider track |
| Thumb Size | 24px × 24px | Circular draggable handle |
| Primary Color | #00E28B | Track and thumb color |
| Border Radius | 4px | Corner radius for track |
| Track Opacity | 18% | Opacity for unfilled track portion |
| Hover Circle | 40px @ 8% | Background circle on hover |
| Focused Circle | 48px @ 12% | Background circle when dragging |

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | **Required** | Current value of the slider (controlled) |
| `onChange` | `(value: number) => void` | **Required** | Callback fired when value changes |
| `width` | `number \| string` | `520` | Custom width for the slider (px or CSS value) |
| `primaryColor` | `string` | `#00E28B` | Primary color for track and thumb |
| `className` | `string` | `''` | Additional CSS class name |
| `disabled` | `boolean` | `false` | Disable the slider interaction |
| `min` | `number` | `0` | Minimum value |
| `max` | `number` | `100` | Maximum value |
| `step` | `number` | `1` | Step increment for value changes |

## Usage Examples

### Basic Usage

```tsx
import { Slider } from '@react-slider/progress-component';
import '@react-slider/progress-component/dist/style.css';

function BasicExample() {
  const [value, setValue] = useState(30);
  
  return <Slider value={value} onChange={setValue} />;
}
```

### Custom Color

```tsx
function CustomColorExample() {
  const [value, setValue] = useState(60);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      primaryColor="#FF5733"
    />
  );
}
```

### Custom Width

```tsx
function CustomWidthExample() {
  const [value, setValue] = useState(75);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      width={300}
    />
  );
}
```

### Custom Range and Step

```tsx
function CustomRangeExample() {
  const [value, setValue] = useState(50);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      min={0}
      max={200}
      step={10}
    />
  );
}
```

### Disabled State

```tsx
function DisabledExample() {
  const [value] = useState(40);
  
  return <Slider value={value} onChange={() => {}} disabled />;
}
```

## Keyboard Navigation

- **Arrow Right/Up**: Increase value by step
- **Arrow Left/Down**: Decrease value by step
- **Home**: Set to minimum value
- **End**: Set to maximum value

## Accessibility

The slider component includes full ARIA support:
- `role="slider"`
- `aria-valuemin`
- `aria-valuemax`
- `aria-valuenow`
- `aria-disabled`
- Keyboard navigation
- Focus indicators

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Publishing to NPM

To publish this package to NPM:

1. Update version in `package.json`
2. Build the package:
   ```bash
   npm run build
   ```
3. Login to NPM:
   ```bash
   npm login
   ```
4. Publish:
   ```bash
   npm publish --access public
   ```

## Development

```bash
# Install dependencies
npm install

# Run demo in development mode
npm run dev

# Build the library
npm run build

# Preview the demo
npm run preview
```

## License

MIT © 2025

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.