React Range Slider with Sections

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

Check out project page and demo

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

Licensed under MIT License. Copyright © 2017 Timofey Lavrenyuk

See LICENSE for more information.