import React, { Component } from "react";
import { Row, Col } from "react-bootstrap";
import EfeStepSlider from "./StepSlider";
import EfeBasicSlider from "./BasicSlider";
import EfeRangeSlider from "./RangeSlider";
import EfeVerticalSlider from "./VerticalSlider";
import EfeMultiRangeSlider from "./MultiRangeSlider";

export default class Slider extends Component {
  render() {
    return (
      <div className={"mb-3"}>
        <Row>
          <Col md={4}>
            <h6>Step Slider</h6>
            <hr />
            <EfeStepSlider></EfeStepSlider>
          </Col>
          <Col md={4}>
            <h6>Basic Slider</h6>
            <hr />
            <EfeBasicSlider></EfeBasicSlider>
          </Col>
          <Col md={4}>
            <h6>Vertical Slider</h6>
            <hr />
            <EfeVerticalSlider></EfeVerticalSlider>
          </Col>
        </Row>
        <Row>
          <Col md={6}>
            <h6>Range Slider</h6>
            <hr />
            <EfeRangeSlider></EfeRangeSlider>
          </Col>
          <Col md={6}>
            <h6>Multi Range Slider</h6>
            <hr />
            <EfeMultiRangeSlider></EfeMultiRangeSlider>
          </Col>
        </Row>
      </div>
    );
  }
}
