Rate this docs

React Bootstrap Slider

React Slider - Bootstrap 4 & Material Design

React Bootstrap slider is an interactive component that lets the user swiftly slide through possible values spread on the desired range.

Its basic implementation is quite simple and does not require big blocks of code.

Examples of React Bootstrap slider use:

  • Video progress bar
  • Volume increase/decrease
  • Enthusiasm-o-meter

See the following React Bootstrap slider examples:

Carousel

If you were looking for a slider and you meant a carousel component, click here to see all the possibilities.


Default slider

Default styling for React Bootstrap Slider component


      import React from "react";

      const SliderPage = () => {
        return (
          <div className="my-5">
            <label htmlFor="customRange1">Example range</label>
            <input type="range" className="custom-range" id="customRange1" />
          </div>
        );
      }

      export default SliderPage;
      

Material slider MDB Pro component

Material Design styling for React Bootstrap Slider component


          import React from "react";
          import { MDBRangeInput } from "mdbreact";

          const SliderPage = () => {

              return (
                <div className="my-5">
                  <MDBRangeInput min={0} max={100} value={50} />
                </div>
              );
          }

          export default SliderPage;
      

Slider with different width MDB Pro component


          import React from "react";
          import { MDBRangeInput, MDBRow } from "mdbreact";

          const SliderPage = () => {

              return (
                <MDBRow style={{ flexDirection: "column" }} className="my-5">
                  <MDBRangeInput
                    min={0}
                    max={100}
                    value={50}
                    formClassName="w-25"
                  />
                  <MDBRangeInput
                    min={0}
                    max={100}
                    value={50}
                    formClassName="w-50"
                  />
                  <MDBRangeInput
                    min={0}
                    max={100}
                    value={50}
                    formClassName="w-75"
                  />
                  <MDBRangeInput
                    min={0}
                    max={100}
                    value={50}
                    formClassName="w-100"
                  />
                </MDBRow>
              );
          }

          export default SliderPage;

      

Slider with first and last value MDB Pro component

0
100
0
100
0
100

          import React from "react";
          import { MDBRangeInput, MDBRow, MDBContainer } from "mdbreact";

          const SliderPage = () => {
              return (
                <MDBContainer>
                  <MDBRow center>
                    <span className="font-weight-bold indigo-text mr-2">0</span>
                    <MDBRangeInput
                      min={0}
                      max={100}
                      value={50}
                      formClassName="w-25"
                    />
                    <span className="font-weight-bold indigo-text ml-2">100</span>
                  </MDBRow>
                  <MDBRow center>
                    <span className="font-weight-bold blue-text mr-2">0</span>
                    <MDBRangeInput
                      min={0}
                      max={100}
                      value={50}
                      formClassName="w-50"
                    />
                    <span className="font-weight-bold blue-text ml-2">100</span>
                  </MDBRow>
                  <MDBRow center>
                    <span className="font-weight-bold purple-text mr-2">0</span>
                    <MDBRangeInput
                      min={0}
                      max={100}
                      value={50}
                      formClassName="w-75"
                    />
                    <span className="font-weight-bold purple-text ml-2">100</span>
                  </MDBRow>
                </MDBContainer>
              );
          }

          export default SliderPage;

      

Slider with icons within card MDB Pro component

Card image cap

Choose your slider option


50
50
50

          import React from "react";
          import {
            MDBContainer,
            MDBRow,
            MDBRangeInput,
            MDBCard,
            MDBCol,
            MDBCardBody,
            MDBCardTitle,
            MDBCardImage,
            MDBIcon
          } from "mdbreact";

          const SliderPage = () => {
              return (
                <MDBContainer>
                  <MDBCol sm="4">
                    <MDBCard>
                      <MDBCardImage
                        top
                        src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg"
                        overlay="white-slight"
                        hover
                        waves
                        alt="Card image cap"
                      />
                      <MDBCardBody>
                        <MDBCardTitle>Choose your slider option</MDBCardTitle>
                        <hr />
                        <MDBRow className="my-4" center>
                          <MDBIcon
                            className="font-weight-bold blue-text mr-2 mt-1"
                            icon="thumbs-o-down"
                          />
                          <MDBRangeInput
                            min={0}
                            max={100}
                            value={50}
                            formClassName="w-75"
                          />
                          <MDBIcon
                            className="font-weight-bold blue-text ml-2 mt-1"
                            icon="thumbs-o-up"
                          />
                        </MDBRow>
                        <MDBRow className="my-4" center>
                          <MDBIcon
                            className="font-weight-bold indigo-text mr-2 mt-1"
                            icon="dollar"
                          />
                          <MDBRangeInput
                            min={0}
                            max={100}
                            value={50}
                            formClassName="w-75"
                          />
                          <MDBIcon
                            className="font-weight-bold indigo-text ml-2 mt-1"
                            icon="eur"
                          />
                        </MDBRow>
                        <MDBRow className="my-4" center>
                          <MDBIcon
                            className="font-weight-bold indigo-text mr-2 mt-1"
                            icon="minus"
                          />
                          <MDBRangeInput
                            min={0}
                            max={100}
                            value={50}
                            formClassName="w-75"
                          />
                          <MDBIcon
                            className="font-weight-bold indigo-text ml-2 mt-1"
                            icon="plus"
                          />
                        </MDBRow>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBContainer>
              );
          }

          export default SliderPage;
           

Slider with price counter MDB Pro component

Slide to see the pricing change


You earn

$75

Client pays

$319


          import React, { Component } from "react";
          import {
            MDBContainer,
            MDBRow,
            MDBRangeInput,
            MDBCard,
            MDBCol,
            MDBCardBody,
            MDBBadge
          } from "mdbreact";

          class SliderPage extends Component {
            state = {
              value: 0
            };

            handlePricingChange = value => {
              this.setState({ value });
            };

            render() {
              return (
                  <MDBContainer className="mt-5">
                    <MDBCol sm="4">
                      <MDBCard>
                        <MDBCardBody>
                          <h3 className="text-center font-weight-bold blue-text mt-3 mb-4 pb-4">
                            <strong>Slide to see the pricing change</strong>
                          </h3>
                          <hr />
                          <MDBRow className="my-4" center>
                            <MDBRangeInput
                              min={0}
                              max={96}
                              value={0}
                              formClassName="w-75"
                              getValue={this.handlePricingChange}
                            />
                          </MDBRow>
                          <MDBRow>
                            <MDBCol className="text-center pb-5" size="6">
                              <h2>
                                <MDBBadge color="blue lighten-2" className="mb-4">
                                  You earn
                                </MDBBadge>
                              </h2>
                              <h2 className="display-4" style={{ color: "#0d47a1" }}>
                                <strong>${this.state.value}</strong>
                              </h2>
                            </MDBCol>
                            <MDBCol className="text-center pb-5" size="6">
                              <h2>
                                <MDBBadge color="blue lighten-2" className="mb-4">
                                  Client pays
                                </MDBBadge>
                              </h2>
                              <h2 className="display-4" style={{ color: "#0d47a1" }}>
                                <strong>${223 + +this.state.value}</strong>
                              </h2>
                            </MDBCol>
                          </MDBRow>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                </MDBContainer>
              );
            }
          }

          export default SliderPage;


      

React Slider - API

In this section you will find advanced information about the Slider component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what methods you can use to work with it.

Import statement


          import { MDBRangeInput } from "mdbreact";
        

API Reference: MDBRangeInput Properties

Name Type Default Description Example
min Number 0 Sets the lowest Slider's value <MDBRangeInput min={10} ... />
max Number 100 Sets the highest slider's value <MDBRangeInput max={101} ... />
value Number 50 Slider's value - useful for additional data binding and edge use-cases <MDBRangeInput value={32} ... />

API Reference: MDBRangeInput Methods

Name Parameters Description Example
getValue value Returns slider value, on onChange event <MDBRangeInput getValue={this.handlePricingChange} />