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>
);
};