@gilbarbara/react-range-slider
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.1 • Public • Published

    react-range-slider

    npm version build status Maintainability Test Coverage

    A range slider component for React

    View the demo

    Installation

    npm i @gilbarbara/react-range-slider

    Usage

    import React, { useState } from 'react';
    import RangeSlider, { RangeSliderPosition, RangeSliderProps } from '@gilbarbara/react-range-slider';
     
    export default function App() {
        const [x, setX] = useState(10);
     
        const handleChange = (position: RangeSliderPosition, props: RangeSliderProps) => {
            setX(position.x);
        };
     
        return <RangeSlider axis="x" x={x} onChange={handleChange} />;
    }

    Props

    axis {'x' | 'y' | 'xy'} ▶︎x
    Type of slider

    x {number}
    Use with axis x or xy

    xMin {number} ▶︎0
    Min value of X

    xMax {number} ▶︎100
    Max value of X

    xStep {number} ▶︎1
    Step of X

    y {number}
    Use with axis y or xy

    yMin {number} ▶︎0
    Min value of Y

    yMax {number} ▶︎100
    Max value of Y

    yStep {number} ▶︎1
    Step of Y

    onAfterChange {function}
    It is called after the slider changed (click or drag)

    onChange {function}
    It is called for each step

    onDragEnd {function}
    It is called after dragging the thumb

    Customization

    You can customize the UI with a styles prop. Check out styles.ts for more information.

    <RangeSlider
      ...
      styles={{
        height: '10px',
        trackBorderRadius: 0,
      }}
    />

    License

    MIT

    Install

    npm i @gilbarbara/react-range-slider

    DownloadsWeekly Downloads

    379

    Version

    0.6.1

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    32

    Last publish

    Collaborators

    • gilbarbara