This is a fork from https://github.com/whoisandie/react-rangeslider. Added custom min max markers on the slider.
npm install react-rangeslider-withmarkerCheck out examples.
npm (use --save to include it in your package.json)``bash`
$ npm install react-rangeslider-withmarker --save
...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 (
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 (
orientation="vertical"
onChange={this.handleChange} />
);
}
}
`lib/umd
There's also a umd version available at . The component is available on window.ReactRangeslider.
.$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[npm_img]: https://img.shields.io/npm/v/react-rangeslider.svg?style=flat-square
[npm_site]: https://www.npmjs.org/package/react-rangeslider