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.