react-input-range

This Module is based on the react-input-range Module (https://www.npmjs.com/package/react-input-range) by David Chin.

I just added the vertical option. Otherwise see the original for usage.

Installation

1. Install react-input-range-vertical using npm. npm install react-input-range-vertical
2. Import react-input-range to use InputRange component.
3. Optionally, import react-input-range.css if you want to apply the default styling.
4. Depending on your browser support requirement, babel-core/polyfill or core-js/es6 polyfill might be needed.

Usage

If accepting a range of values:

``{js}
import React from 'react';
import ReactDOM from 'react-dom';
import InputRange from 'react-input-range';

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
values: {
min: 2,
max: 10,
},
};
}

handleValuesChange(component, values) {
this.setState({
values: values,
});
}

render() {
return (
maxValue={20}
minValue={0}
value={this.state.values}
onChange={this.handleValuesChange.bind(this)}
/>
);
}
}

ReactDOM.render(
,
document.getElementById('app')
);
`

If accepting a single value, pass a number to value prop, i.e.:

`{js}
maxValue={20}
minValue={0}
value={this.state.value}
onChange={this.handleValueChange.bind(this)}
/>
`

For a vertical slider just pass the string "vertical" to the orientation prop, i.e.:

`{js}
maxValue={20}
minValue={0}
value={this.state.value}
onChange={this.handleValueChange.bind(this)}
orientation="vertical"
/>
`

$3

Property | Type | Description
:-----------------------|:-----------------------------------|:----------------------------------
ariaLabelledby |string |aria-labelledby attribute
ariaControls |string |aria-controls attribute
classNames |Object.<string> |CSS class names
defaultValue |number | Object.<number> |Default value(s)
disabled |boolean |Disabled or not
formatLabel |Function |Label formatter
labelPrefix |string |Label prefix
labelSuffix |string |Label suffix
maxValue |number |Maximum value it can accept
minValue |number |Minimum value it can accept
name |string |Name of form input
onChange |Function |onChange callback (required)
onChangeComplete |Function |onChangeComplete callback
step |number |Increment/decrement value
value |number | Object.<number> |Current value(s) (required)
orientation |string |Wether the slider is horizontal or vertical

Development

If you want to work on this project locally, you need to grab all of its dependencies.
`
npm install && bundle install
`

After that, you should be able run
`
npm start
``