React Progress Slider Component

A beautiful, flexible, and reusable React slider component built with TypeScript. Features exact design specifications for a premium UI experience.

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

npm install @react-slider/progress-component

or with yarn:

yarn add @react-slider/progress-component

Quick Start

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

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

function CustomColorExample() {
  const [value, setValue] = useState(60);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      primaryColor="#FF5733"
    />
  );
}

Custom Width

function CustomWidthExample() {
  const [value, setValue] = useState(75);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      width={300}
    />
  );
}

Custom Range and Step

function CustomRangeExample() {
  const [value, setValue] = useState(50);
  
  return (
    <Slider 
      value={value} 
      onChange={setValue}
      min={0}
      max={200}
      step={10}
    />
  );
}

Disabled State

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:

   npm run build

3. Login to NPM:

   npm login

4. Publish:

   npm publish --access public

Development

# 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.