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 from 'react';
            import { MDBRange } from 'mdb-react-ui-kit';

            export default function App() { 
              return (
                <MDBRange
                  defaultValue={50}
                  id='customRange'
                  label='Example range'
                />
              );
            }

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 max—0 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() { 
              return (
                <MDBRange
                  defaultValue={3}
                  min='0'
                  max='5'
                  step='0.5'
                  id='customRange3'
                  label='Example range'
                />
              );
            }

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 from 'react';
            import { MDBRange } from 'mdb-react-ui-kit';
            
            export default function App() { 
              return (
                <MDBRange
                  defaultValue={2.5}
                  min='0'
                  max='5'
                  step='0.5'
                  id='customRange3'
                  label='Example range'
                />
              );
            }

Range - API

Import

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

Properties

MDBRange

Name Type Default Description Example
defaultValue string | number '' Default value of the MDBRange <MDBRange defaultValue='50' />
disabled boolean false Makes the MDBRange disabled <MDBRange disabled />
disableTooltip boolean false Makes the MDBRange tooltip disabled <MDBRange disableTooltip />
id string '' Defines an id for the MDBRange <MDBRange id="inputExample" />
inputRef React.MutableRefObject undefined Reference to input element <MDBRange inputRef={inputReference} />
label React.ReactNode '' Defines a label content for the MDBRange <MDBRange label="Example label" id="inputExample" />
labelId string '' Defines an id for the label <MDBRange label="Example label" labelId="exampleLabel" id="rangeExample" />
labelClass string '' Adds custom classes to the label <MDBRange label="Example label" labelId="exampleLabel" labelClass="test-class" id="rangeExample" />
min string '0' The minimum permitted value MDBRange <MDBRange min='1' />
max string '100' The maximum permitted value for MDBRange <MDBRange max='5' />
name string '' Specifies the name for the MDBRange <MDBRange name="sampleName" label="Example label" id="inputExample" />
step string '1' The stepping interval for MDBRange <MDBRange step='0.5' />
value string | number '' Sets the value for the MDBRange <MDBRange value={value} label="Example label" id="inputExample" />

CSS variables

        
            
        // .range
        --#{$prefix}range-thumb-height: #{$range-thumb-height};
        --#{$prefix}range-thumb-width: #{$range-thumb-width};
        --#{$prefix}range-thumb-top: #{$range-thumb-top};
        --#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left};
        --#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius};
        --#{$prefix}range-thumb-transform: #{$range-thumb-transform};
        --#{$prefix}range-thumb-transition: #{$range-thumb-transition};
        --#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size};
        --#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height};
        --#{$prefix}range-thumb-value-color: #{$range-thumb-value-color};
        --#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight};
        --#{$prefix}range-thumb-background: #{$range-thumb-background};

SCSS variables

        
            
        $range-thumb-height: 30px;
        $range-thumb-width: 30px;
        $range-thumb-top: -35px;
        $range-thumb-background: $primary;
        $range-thumb-active-background: tint-color($primary, 70%);
        $range-thumb-margin-left: -15px;
        $range-thumb-border-radius: 50% 50% 50% 0;
        $range-thumb-transform: scale(0);
        $range-thumb-transition: transform 0.2s ease-in-out;
        $range-thumb-value-font-size: 12px;
        $range-thumb-value-line-height: 30px;
        $range-thumb-value-color: rgb(255, 255, 255);
        $range-thumb-value-font-weight: 500;
        // override default bootstrap values for form range
        $form-range-thumb-bg: $range-thumb-background;
        $form-range-thumb-active-bg: $range-thumb-active-background;