Range

    Use our custom range inputs for consistent cross-browser styling and built-in customization.

    Overview

    Create custom <input type="range"> controls with <FormRange>. 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.

    API

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    disabled
    boolean

    Make the control disabled

    id
    string

    Uses controlId from <FormGroup> if not explicitly specified.

    onChange
    function

    A callback fired when the value prop changes

    value
    string | arrayOf | number
    controlled by: onChange, initial prop: defaultValue

    The value attribute of underlying input

    bsPrefix
    string
    {'form-range'}

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.