React Bootstrap Slider

React Slider - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.webp"
                    overlay="white-slight"
                    hover
                    waves
                    alt="Card image cap"
                  />
                  <MDBCardBody>
                    <MDBCardTitle>Choose your slider option</MDBCardTitle>
                    <hr />
                    <MDBRow className="my-4" center>
                      <MDBIcon
                        far
                        className="font-weight-bold blue-text mr-2 mt-1"
                        icon="thumbs-down"
                      />
                      <MDBRangeInput
                        min={0}
                        max={100}
                        value={50}
                        formClassName="w-75"
                      />
                      <MDBIcon
                        far
                        className="font-weight-bold blue-text ml-2 mt-1"
                        icon="thumbs-up"
                      />
                    </MDBRow>
                    <MDBRow className="my-4" center>
                      <MDBIcon
                        className="font-weight-bold indigo-text mr-2 mt-1"
                        icon="dollar-sign"
                      />
                      <MDBRangeInput
                        min={0}
                        max={100}
                        value={50}
                        formClassName="w-75"
                      />
                      <MDBIcon
                        className="font-weight-bold indigo-text ml-2 mt-1"
                        icon="euro-sign"
                      />
                    </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="6">
                  <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} ... />
step Number 1 Specifies the interval between valid values in a number-based input. <MDBRangeInput step={0.1} ... />
tag String div Changes default tag <MDBRangeInput tag="form" ... />
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} />