React Bootstrap Range Slider
Usage Examples

Simple Slider

This is the simplest usage example, where only the required value and onChange props are provided. By default min = 0 and max = 100.

const SimpleSlider = () => {

  const [ value, setValue ] = React.useState(50);

  return (
    <RangeSlider
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );

};

Slider with Label

The React Bootstrap label component can be used with the slider just as it can with any form control component.

const SliderWithLabel = () => {

  const [ value, setValue ] = React.useState(50);

  return (
    <Form>
      <Form.Group>
        <Form.Label>
          My Label
        </Form.Label>
        <RangeSlider
          value={value}
          onChange={e => setValue(e.target.value)}
        />
      </Form.Group>
    </Form>
  );

};

Slider with Column Layout Label

React Bootstrap's Col can be used for a horizontally aligned label.

const SliderWithColumnLayoutLabel = () => {

  const [ value, setValue ] = React.useState(50);

  return (
    <Form>
      <Form.Group as={Row}>
        <Form.Label column sm="4">
          My Other Label
        </Form.Label>
        <Col sm="8">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        </Col>
      </Form.Group>
    </Form>
  );

};

Slider with a Text Input

The slider is arranged in a row with a Form.Control component.

const SliderWithInputFormControl = () => {

  const [ value, setValue ] = React.useState(25);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="9">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        </Col>
        <Col xs="3">
          <Form.Control value={value}/>
        </Col>
      </Form.Group>
    </Form>
  );

};

Sliders with size prop specified

Set the size prop to control the size of the slider. This is useful so that the slider vertically aligned with other form controls.

const Sizes = () => {

  const [ value1, setValue1 ] = React.useState(20);
  const [ value2, setValue2 ] = React.useState(50);
  const [ value3, setValue3 ] = React.useState(80);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="4">
          <Form.Control value={value1} size='sm'/>
        </Col>
        <Col xs="8">
          <RangeSlider
            value={value1}
            onChange={e => setValue1(e.target.value)}
            size='sm'
          />
        </Col>
      </Form.Group>
      <Form.Group as={Row}>
        <Col xs="4">
          <Form.Control value={value2}/>
        </Col>
        <Col xs="8">
          <RangeSlider
            value={value2}
            onChange={e => setValue2(e.target.value)}
          />
        </Col>
      </Form.Group>
      <Form.Group as={Row}>
        <Col xs="4">
          <Form.Control value={value3} size='lg'/>
        </Col>
        <Col xs="8">
          <RangeSlider
            value={value3}
            onChange={e => setValue3(e.target.value)}
            size='lg'
          />
        </Col>
      </Form.Group>
      </Form>
  );

};

Color variants

Eight color variants are supported, which are the same as the Bootstrap Button variants.

const Variants = () => {

  const [ value1, setValue1 ] = React.useState(30);
  const [ value2, setValue2 ] = React.useState(30);
  const [ value3, setValue3 ] = React.useState(30);
  const [ value4, setValue4 ] = React.useState(30);
  const [ value5, setValue5 ] = React.useState(70);
  const [ value6, setValue6 ] = React.useState(70);
  const [ value7, setValue7 ] = React.useState(70);
  const [ value8, setValue8 ] = React.useState(70);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="3">
          <RangeSlider
            value={value1}
            onChange={e => setValue1(e.target.value)}
            variant='primary'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value2}
            onChange={e => setValue2(e.target.value)}
            variant='secondary'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value3}
            onChange={e => setValue3(e.target.value)}
            variant='success'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value4}
            onChange={e => setValue4(e.target.value)}
            variant='danger'
          />
        </Col>
      </Form.Group>
      <Form.Group as={Row}>
        <Col xs="3">
          <RangeSlider
            value={value5}
            onChange={e => setValue5(e.target.value)}
            variant='warning'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value6}
            onChange={e => setValue6(e.target.value)}
            variant='info'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value7}
            onChange={e => setValue7(e.target.value)}
            variant='dark'
          />
        </Col>
        <Col xs="3">
          <RangeSlider
            value={value8}
            onChange={e => setValue8(e.target.value)}
            variant='light'
          />
        </Col>
      </Form.Group>
    
  );

};

Tooltip behaviour: auto, on or off

When the tooltip prop is set to 'auto' the tooltip will be visible only when the slider is hovered. When set to on, the tooltip will always be visible and when set to off will not be rendered.

const TooltipBehaviour = () => {

  const [ value1, setValue1 ] = React.useState(20);
  const [ value2, setValue2 ] = React.useState(50);
  const [ value3, setValue3 ] = React.useState(80);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="4">
          <RangeSlider
            value={value1}
            onChange={e => setValue1(e.target.value)}
            tooltip='auto'
          />
        </Col>
        <Col xs="4">
          <RangeSlider
            value={value2}
            onChange={e => setValue2(e.target.value)}
            tooltip='on'
          />
        </Col>
        <Col xs="4">
          <RangeSlider
            value={value3}
            onChange={e => setValue3(e.target.value)}
            tooltip='off'
          />
        </Col>
      </Form.Group>
    </Form>
  );

};

Tooltip placement

The tooltip placement can be either be above the slider thumb or below, which is the default.

const TooltipPlacement = () => {

  const [ value1, setValue1 ] = React.useState(25);
  const [ value2, setValue2 ] = React.useState(75);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="6">
          <RangeSlider
            value={value1}
            onChange={e => setValue1(e.target.value)}
            tooltipPlacement='top'
            tooltip='on'
          />
        </Col>
        <Col xs="6">
          <RangeSlider
            value={value2}
            onChange={e => setValue2(e.target.value)}
            tooltipPlacement='bottom'
            tooltip='on'
          />
        </Col>
      </Form.Group>
    </Form>
  );

};

Tooltip label formatter

A formatter function returns a string which is rendered as the tooltip label text.

const TooltipLabel = () => {

  const [ value, setValue ] = React.useState(25);

  return (
    <RangeSlider
      value={value}
      onChange={e => setValue(e.target.value)}
      tooltipLabel={currentValue => `${currentValue}%`}
      tooltip='on'
    />
  );

};

Disabled

The disabled prop is used to disable the slider.

const Disabled = () => {

  const [ value, setValue ] = React.useState(50);

  return (
    <RangeSlider
      value={value}
      onChange={e => setValue(e.target.value)}
      disabled
    />
  );

};

Step

When the step prop is defined the slider thumb will snap to values in accordance with the step size.

const Step = () => {

  const [ value, setValue ] = React.useState(50);

  return (
    <RangeSlider
      value={value}
      onChange={e => setValue(e.target.value)}
      step={10}
    />
  );

};

Min, max

The min and max props can be used to specify the range of possible slider values.

const MinMax = () => {

  const [ value1, setValue1 ] = React.useState(2);
  const [ value2, setValue2 ] = React.useState(0);

  return (
    <Form>
      <Form.Group as={Row}>
        <Col xs="6">
          <RangeSlider
            value={value1}
            onChange={e => setValue1(e.target.value)}
            min={1}
            max={5}
          />
        </Col>
        <Col xs="6">
          <RangeSlider
            value={value2}
            onChange={e => setValue2(e.target.value)}
            min={-20}
            max={50}
          />
        </Col>
      </Form.Group>
    </Form>
  );

};

onAfterChange

The onAfterChange callback is invoked after interaction with the slider has finished, if the value has changed.

const AfterChange = () => {

  const [ value, setValue ] = React.useState(50);
  const [ finalValue, setFinalValue ] = React.useState(null);

  return (
    <RangeSlider
      value={value}
      onChange={e => setValue(e.target.value)}
      onAfterChange={e => setFinalValue(e.target.value)}
    />
    <div>Final value: {finalValue}</div>
  );

};