Nutritious Pancake Mountain
Miss any of our Open RFC calls?Watch the recordings here! »

@gilbarbara/react-range-slider

0.5.0 • 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, { Component } from 'react';
import RangeSlider from '@gilbarbara/react-range-slider';
 
export default class App extends Component {
  state = {
    x: 10,
    y: 10,
  };
 
  handleChange = (position, props) => {
    this.setState(position);
  };
 
  render() {
    const { x, y } = this.state;
 
    return (
      <RangeSlider
        axis="xy"
        x={x}
        y={y}
        onChange={this.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

onChange {function} - required
Change callback

onDragEnd {function}
DragEnd callback

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

19

Version

0.5.0

License

MIT

Unpacked Size

34.8 kB

Total Files

15

Last publish

Collaborators

  • avatar