React Rangeslider with Markers [![NPM Package][npm_img]][npm_site]

> This is a fork from https://github.com/whoisandie/react-rangeslider. Added custom min max markers on the slider.

Check out examples.

Install

Install via npm (use --save to include it in your package.json)

``bash
$ npm install react-rangeslider-withmarker --save
`

Usage

React Rangeslider is bundled with a single slider component. You can require them in plain old ES5 syntax or import them in ES6 syntax.

...plain old ES5

`js
var React = require('react');
var Slider = require('react-rangeslider-withmarker');

var Volume = React.createClass({
getInitialState: function(){
return {
value: 10,
};
}

handleChange: function(value) {
this.setState({
value: value,
});
}

render: function() {
return (
value={value}
orientation="vertical"
onChange={this.handleChange} />
);
}
});

module.exports = Volume;
`

... or use ES6 syntax

`js
import React, { Component } from 'react';
import Slider from 'react-rangeslider-withmarker';

export default Volume extends Component {
constructor(props, context) {
super(props, context);
this.state = {
value: 10 / Start value /
};
}

handleChange(value) {
this.setState({
value: value
});
}

render() {
return (
value={value}
orientation="vertical"
onChange={this.handleChange} />
);
}
}
`
There's also a umd version available at lib/umd. The component is available on window.ReactRangeslider.

API


Rangeslider is bundled with a single component, that accepts data and callbacks only as props.

$3

`js
var Slider = require('react-rangeslider');

// inside render
min={String or Number}
max={String or Number}
step={String or Number}
orientation={String}
value={Number}
onChange={Function} />
`

$3

Prop | Default | Description
--------- | ------- | -----------
min | 0 | minimum value the slider can hold
max | 100 | maximum value the slider can hold
step | 1 | step in which increments/decrements have to be made
orientation | horizontal | orientation of the slider
value | - | current value of the slider
onChange` | - | function the slider takes, current value of the slider as the first parameter

Issues

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

License

MIT © whoisandie

[npm_img]: https://img.shields.io/npm/v/react-rangeslider.svg?style=flat-square
[npm_site]: https://www.npmjs.org/package/react-rangeslider