Nightclub Party Music

    react-input-range-vertical

    1.0.0 • Public • Published

    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:

    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 (
          <InputRange
            maxValue={20}
            minValue={0}
            value={this.state.values}
            onChange={this.handleValuesChange.bind(this)}
          />
        );
      }
    }
     
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    );

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

    <InputRange
      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.:

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

    Options

    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
    

    Install

    npm i react-input-range-vertical

    DownloadsWeekly Downloads

    29

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • dibbi