React Range Slider with Sections

A fast & lightweight responsive touch-friendly react slider component with sections.

Example

import React, { PureComponent } from 'react'
import Slider from 'react-range-slider'

class PriceCountSlider extends PureComponent {
  constructor(props, context) {
    super(props, context)
    this.state = {
      count: 0
    }
  }
  handleOnChange = (value) => {
    this.setState({
      count: value
    })
  }
  render() {
    return (
      <Slider
        range={[50, 100, 200, 400, 800]}
        onChange={this.handleOnChange}
      />
    )
  }
}

API

Range slider is bundled as a single component, that accepts data and callbacks only as props.

Props

Prop	Type	Required	Description
`range`	array	true	array with ascending numbers. `[50, 100, 200, 400, 800]`
`onChange`	function		function gets called whenever the slider handle is being dragged or clicked

Development

To work on the project locally, you need to pull its dependencies and run npm start.

$ npm install
$ npm start

To start tests you need to run npm test.

To check linting you need to run npm run lint.

Issues

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.

License

See LICENSE for more information.

FilesExpand file tree

README.md

Latest commit

History