Range

React Bootstrap 5 Range component

A Range is an interactive component that lets the user swiftly slide through possible values spread over the desired range.

Note: Read the API tab to find all available options and advanced customization


Basic example

The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.


          import React, { useState } from 'react';
          import { MDBRange } from 'mdb-react-ui-kit';
          export default function App() { 
            const [range, setRange] = useState(50);

            const onChange = (e) => {
              setRange(e.target.value);
            }

            return (
              <MDBRange
                value={range}
                id='customRange'
                label='Example range'
                onChange={onChange}
              />
            );
          }
        

Disabled

Add the disabled boolean prop on an input to give it a grayed out appearance and remove pointer events.


          import React from 'react';
          import { MDBRange } from 'mdb-react-ui-kit';
          export default function App() { 
            return (
              <MDBRange disabled id='customRange1' label='Example range' />
            );
          }
        

Min and max

Range inputs have implicit values for min and max0 and 100, respectively. You may specify new values for those using the min and max props.


          import React, { useState } from 'react';
          import { MDBRange } from 'mdb-react-ui-kit';
          export default function App() { 
            const [range, setRange] = useState(2);

            const onChange = (e) => {
              setRange(e.target.value);
            }

            return (
              <MDBRange
                value={range}
                min='0'
                max='5'
                step='0.5'
                id='customRange3'
                label='Example range'
                onChange={onChange}
              />
            );
          }
        

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".


          import React, { useState } from 'react';
          import { MDBRange } from 'mdb-react-ui-kit';
          export default function App() { 
            const [range, setRange] = useState(3);

            const onChange = (e) => {
              setRange(e.target.value);
            }

            return (
              <MDBRange
                value={range}
                min='0'
                max='5'
                step='0.5'
                id='customRange3'
                label='Example range'
                onChange={onChange}
              />
            );
          }
        

Range - API


Import


        import { MDBRange } from 'mdb-react-ui-kit';
      

Properties

MDBRange

Name Type Default Description Example
className String '' Add custom class to MDBRange <MDBRange className="class" />
disabled Boolean false Makes the MDBRange disabled <MDBRange disabled />
id String '' Defines an id for the MDBRange <MDBRange id="inputExample" />
label String '' Defines a label text for the MDBRange <MDBRange label='Example label' />
min string '0' The minimum permitted value MDBRange <MDBRange min='1' />
max string '100' The maximum permitted value for MDBRange <MDBRange max='5' />
step string '1' The stepping interval for MDBRange <MDBRange step='0.5' />