banded-payment-slider

React-Banded-Payment-Slider

A React component for banded payment slider

Installation

npm install banded-payment-slider

Usage

import React from 'react';
import BandedPaymentSlider from 'banded-payment-slider';

const App = () => {
  const initialBands = [
    { from: 0, to: 50, percentage: 50 },
    { from: 50, to: 100, percentage: 100 },
  ];

  const handleBandsChange = (newBands) => {
    console.log('Bands updated:', newBands);
  };

  return (
    <BandedPaymentSlider
      bands={initialBands}
      onBandsChange={handleBandsChange}
      labels={{ percentage_paid: "Percentage Paid", delete_band: "Delete Band"}}
    />
  );
};

export default App;

Prop	Type	Description
bands	Array<{ from: number, to: number, percentage: number }>	An array of band objects, each representing a range and percentage.
onBandsChange	(bands: Array<{ from: number, to: number, percentage: number }>) => void	A callback function that receives the updated bands array when changes occur.
labels	{ percentage_paid: string, delete_band: string }	An object containing custom labels for the component. Use this to override default text or provide translations.

Build This Package

Run the build script:

npm run build

License MIT © [Your Name]