bridebook-ui-library/examples/inputs/range.js

Bridebook UI Library

import React from 'react';
import {Link} from 'react-router';
import Component from 'react-pure-render/component';
import {Range} from '../../src/components';
import {Col, Row} from 'react-bootstrap/lib/';
import {values} from 'lodash';

export default class RangeExamples extends Component {

  constructor(props) {
    super(props);

    this.state = {
      rangeValue: [1, 40],
    };
  }

  rangeAction(value) {
    this.setState({
      rangeValue: values(value.target.value)
    });
  }

  render() {
    return (
      <section>
        <Row>
          <Col xs={12}>
            <Link to="/examples/inputs/range">
              <h4>Range Compnent Examples</h4>
            </Link>
          </Col>
          <Col xs={12}>
            <div className="horizontal container">
              <Range name="example-range" label="Example Range Slider" action={::this.rangeAction} range min={1} max={600} headingXs={4} inputsXs={8} defaultValue={this.state.rangeValue} />
            </div>
          </Col>
        </Row>
      </section>
    );
  }
}