Framework:
Download Hire UsGet CoreUI PRO all-access →
CoreUI PRO for React.js
This Component is a part of CoreUI PRO for React.js, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.
Start Free Trial

React Range Slider Component

Range Slider

Enhance your forms with our customizable React Range Slider component for advanced range selection.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

Overview#

The React Range Slider component allows users to select a value or range of values within a predefined range. Unlike the standard <input type="range">, the Range Slider offers enhanced customization options, including multiple handles, labels, tooltips, and vertical orientation. It ensures consistent styling across browsers and provides a rich set of features for advanced use cases.

25
75
Low
Medium
High
<CRangeSlider
  value={[25, 75]}
  labels={['Low', 'Medium', 'High']}
/>

Features#

  • Multiple Handles: Select single or multiple values within the range.
  • Custom Labels: Display labels at specific points on the slider.
  • Tooltips: Show dynamic tooltips displaying current values.
  • Vertical Orientation: Rotate the slider for vertical layouts.
  • Clickable Labels: Enable users to click on labels to set slider values.
  • Disabled State: Disable the slider to prevent user interaction.

Basic React Range Slider#

Create a simple range slider with default settings.

50
<CRangeSlider value={50} />

Multiple handles#

Enable multiple handles to allow the selection of a range or/and multiple values.

20
40
20
40
60
20
40
60
80
<CRangeSlider className="mb-3" value={[20, 40]} />
<CRangeSlider className="mb-3" value={[20, 40, 60]} />
<CRangeSlider value={[20, 40, 60, 80]} />

Vertical Range Slider#

Rotate the slider to a vertical orientation.

20
20
80
20
80
100
<div className="d-flex">
  <CRangeSlider className="me-3" value={20} vertical />
  <CRangeSlider className="me-3" value={[20, 80]} vertical />
  <CRangeSlider value={[20, 80, 100]} vertical />
</div>

Disabled#

Disable the slider to prevent user interaction.

50
50
75
<CRangeSlider className="mb-3" value={50} disabled />
<CRangeSlider value={[50, 75]} disabled />

Min and max#

React Range Slider component has implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

50
50
75
<CRangeSlider className="mb-3" min={-50} max={150} value={50} />
<CRangeSlider min={-50} max={150} value={[50, 75]} />

Steps#

Range Slider inputs automatically "snap" to whole numbers. To modify this behavior, set a step value. In the example below, we increase the number of steps by specifying step="0.25".

50
50
75
<CRangeSlider className="mb-3" step={0.25} value={50}  />
<CRangeSlider step={0.25} value={[50, 75]} />

Distance#

Sets the minimum distance between multiple slider handles by setting distance and ensures that the handles do not overlap or get too close.

50
75
<CRangeSlider distance={10} value={[50, 75]} />

Labels#

Add labels to specific points on the slider for better context. If you provide an array of strings, as in the example below, then labels will be spaced at equal distances from the beginning to the end of the slider.

30
70
Start
Middle
End
<CRangeSlider labels={['Start', 'Middle', 'End']} value={[30, 70]} />

Labels customization#

Labels can be configured as an array of strings or objects. When using objects, you can specify additional properties like value, label, className, and style.

-10°C
40°C
-50°C
0°C
20°C
100°C
<CRangeSlider 
  min={-50}
  max={100}
  labels={[
    {
      value: -50,
      label: '-50°C',
      className: 'text-info'
    },
    {
      value: 0,
      label: '0°C',
      style: {
        fontWeight: 'bold'
      }
    },
    {
      value: 20,
      label: '20°C',
      className: ['text-warning']
    },
    {
      value: 100,
      label: '100°C',
      className: 'text-danger'
    }
  ]}
  tooltipsFormat={(value) => `${value}°C`}
  value={[-10, 40]}
/>

Clickable labels#

By default, users can click on labels to set the slider to specific values. You can disable this feature by setting clickableLabels to false.

20
80
Low
Medium
High
<CRangeSlider clickableLabels={false} labels={['Low', 'Medium', 'High']} value={[20, 80]} />

Tooltips#

By default, tooltips display the current value of each handle. You can disable tooltips by setting tooltips to false

<CRangeSlider tooltips={false} value={[40, 60]} />

Tooltips formatting#

Customize the content of tooltips using the tooltipsFormat option. This can be a function that formats the tooltip text based on the current value.

$100
$350
$0
$250
$500
$1000
<CRangeSlider 
  max={1000}
  labels={[
    {
      value: 0,
      label: '$0'
    },
    {
      value: 250,
      label: '$250'
    },
    {
      value: 500,
      label: '$500'
    },
    {
      value: 1000,
      label: '$1000'
    }
  ]}
  tooltipsFormat={(value) => `$${value}`}
  value={[100, 350]}
/>

Track#

The track property allows you to customize how the slider's track is displayed. By default, the track property is set to 'fill' enabling dynamic filling of the track based on the slider's current value(s). This means the filled portion of the track will adjust automatically as the slider handle(s) move, offering a responsive visual representation of the selected range.

Disable filling#

If you set track to false, the slider's track will not display any fill. Only the default track background will be visible, which can be useful for minimalist designs or when you use more then two handles.

50
50
75
25
50
75
<CRangeSlider className="mb-3" track={false} value={50} />
<CRangeSlider className="mb-3" track={false} value={[50, 75]} />
<CRangeSlider track={false} value={[25, 50, 75]} />

Accessibility#

The React.js Range Slider component is built with accessibility in mind. Each slider handle includes the following ARIA attributes:

  • role="slider"
  • aria-valuemin: Minimum value
  • aria-valuemax: Maximum value
  • aria-valuenow: Current value
  • aria-orientation: horizontal or vertical

Additionally, ensure that labels and tooltips are clear and descriptive to provide the best experience for all users.

Customizing#

CSS variables#

React Range Sliders use local CSS variables on .range-slider for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-range-slider-track-width: #{$range-slider-track-width};
--cui-range-slider-track-height: #{$range-slider-track-height};
--cui-range-slider-track-cursor: #{$range-slider-track-cursor};
--cui-range-slider-track-bg: #{$range-slider-track-bg};
--cui-range-slider-track-border-radius: #{$range-slider-track-border-radius};
--cui-range-slider-track-box-shadow: #{$range-slider-track-box-shadow};
--cui-range-slider-track-in-range-bg: #{$range-slider-track-in-range-bg};
--cui-range-slider-disabled-track-in-range-bg: #{$range-slider-disabled-track-in-range-bg};


--cui-range-slider-label-padding-y: #{$range-slider-label-padding-y};
--cui-range-slider-label-padding-x: #{$range-slider-label-padding-x};
--cui-range-slider-label-font-size: #{$range-slider-label-font-size};
--cui-range-slider-label-color: #{$range-slider-label-color};


--cui-range-slider-thumb-width: #{$range-slider-thumb-width};
--cui-range-slider-thumb-height: #{$range-slider-thumb-height};
--cui-range-slider-thumb-bg: #{$range-slider-thumb-bg};
--cui-range-slider-thumb-border: #{$range-slider-thumb-border};
--cui-range-slider-thumb-border-radius: #{$range-slider-thumb-border-radius};
--cui-range-slider-thumb-box-shadow: #{$range-slider-thumb-box-shadow};
--cui-range-slider-thumb-focus-box-shadow: #{$range-slider-thumb-focus-box-shadow};
--cui-range-slider-thumb-active-bg: #{$range-slider-thumb-active-bg};
--cui-range-slider-thumb-disabled-bg: #{$range-slider-thumb-disabled-bg};
--cui-range-slider-thumb-transition: #{$range-slider-thumb-transition};


--cui-range-slider-tooltip-zindex: #{$zindex-tooltip};
--cui-range-slider-tooltip-padding-y: #{$range-slider-tooltip-padding-y};
--cui-range-slider-tooltip-padding-x: #{$range-slider-tooltip-padding-x};
--cui-range-slider-tooltip-margin-end: #{$range-slider-tooltip-margin-end};
--cui-range-slider-tooltip-margin-bottom: #{$range-slider-tooltip-margin-bottom};
--cui-range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size};
--cui-range-slider-tooltip-color: #{$range-slider-tooltip-color};
--cui-range-slider-tooltip-bg: #{$range-slider-tooltip-bg};
--cui-range-slider-tooltip-border-radius: #{$range-slider-tooltip-border-radius};
--cui-range-slider-tooltip-box-shadow: #{$range-slider-tooltip-box-shadow};
--cui-range-slider-tooltip-transition: #{$range-slider-tooltip-transition};


--cui-range-slider-tooltip-arrow-width: #{$range-slider-tooltip-arrow-width};
--cui-range-slider-tooltip-arrow-height: #{$range-slider-tooltip-arrow-height};
--cui-range-slider-vertical-track-width: #{$range-slider-vertical-track-width};
--cui-range-slider-vertical-track-height: #{$range-slider-vertical-track-height};

How to use CSS variables#

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': 'red',
}
return <CRangeSlider style={vars}>...</CRangeSlider>

SASS variables#

$range-slider-track-width:                 100% !default;
$range-slider-track-height:                .5rem !default;
$range-slider-track-cursor:                pointer !default;
$range-slider-track-bg:                    var(--cui-secondary-bg) !default;
$range-slider-track-border-radius:         1rem !default;
$range-slider-track-box-shadow:            var(--cui-box-shadow-inset) !default;


$range-slider-track-in-range-bg:           rgba(var(--cui-primary-rgb), .5) !default;
$range-slider-disabled-track-in-range-bg:  rgba(var(--cui-secondary-rgb), .375) !default;


$range-slider-label-padding-y:             0 !default;
$range-slider-label-padding-x:             0 !default;
$range-slider-label-font-size:             $font-size-sm !default;
$range-slider-label-color:                 var(--cui-body-color) !default;


$range-slider-thumb-width:                 1rem !default;
$range-slider-thumb-height:                $range-slider-thumb-width !default;
$range-slider-thumb-bg:                    $component-active-bg !default;
$range-slider-thumb-border:                0 !default;
$range-slider-thumb-border-radius:         1rem !default;
$range-slider-thumb-box-shadow:            0 .1rem .25rem rgba($black, .1) !default;
$range-slider-thumb-focus-box-shadow:      0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$range-slider-thumb-active-bg:             tint-color($primary, 70%) !default;
$range-slider-thumb-disabled-bg:           rgba(var(--cui-secondary-rgb), 1) !default;
$range-slider-thumb-transition:            background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;


$range-slider-tooltip-padding-y:           $spacer * .25 !default;
$range-slider-tooltip-padding-x:           $spacer * .5 !default;
$range-slider-tooltip-margin-end:          .25rem !default;
$range-slider-tooltip-margin-bottom:       .25rem !default;
$range-slider-tooltip-font-size:           $font-size-sm !default;
$range-slider-tooltip-color:               var(--cui-body-color) !default;
$range-slider-tooltip-bg:                  var(--cui-secondary-bg) !default;
$range-slider-tooltip-border-radius:       var(--cui-border-radius) !default;
$range-slider-tooltip-box-shadow:          var(--cui-box-shadow) !default;
$range-slider-tooltip-transition:          visibility .15s, opacity .15s ease !default;


$range-slider-tooltip-arrow-width:         .8rem !default;
$range-slider-tooltip-arrow-height:        .4rem !default;


$range-slider-vertical-track-width:        .5rem !default;
$range-slider-vertical-track-height:       10rem !default;

API#

CRangeSlider#

import { CRangeSlider } from '@coreui/react'
// or
import CRangeSlider from '@coreui/react/src/components/range-slider/CRangeSlider'
PropertyDescriptionTypeDefault
classNameCustomize the styling of your React Range Slider by adding a custom className.
This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets.		string-
clickableLabelsEnable or disable clickable labels in the React Range Slider.
When set to true, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.		booleantrue
disabledControl the interactive state of the React Range Slider with the disabled prop.
Setting it to true will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.		booleanfalse
distanceDefine the minimum distance between slider handles using the distance prop in the React Range Slider.
This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.		number0
labelsAdd descriptive labels to your React Range Slider by providing an array of labels.
These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.		Label[]-
maxSpecify the maximum value for the React Range Slider with the max prop.
This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.		number100
minSet the minimum value for the React Range Slider using the min prop.
This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.		number0
nameAssign a name to the React Range Slider for form integration.
Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.		string | string[]-
onChangeHandle value changes in the React Range Slider by utilizing the onChange callback.
This function is triggered whenever the slider's value updates, enabling you to manage state and respond to user interactions effectively.		(value: number[]) => void-
stepControl the granularity of the React Range Slider by setting the step prop.
This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.		number1
tooltipsToggle the visibility of tooltips in the React Range Slider with the tooltips prop.
When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.		booleantrue
tooltipsFormatCustomize the display format of tooltips in the React Range Slider using the tooltipsFormat function.
This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.		(value: number) => ReactNode-
trackControls the visual representation of the slider's track. When set to 'fill', the track is dynamically filled based on the slider's value(s). Setting it to false disables the filled track.boolean | 'fill'fill
valueSet the current value(s) of the React Range Slider using the value prop.
Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.		number | number[][]
verticalOrient the React Range Slider vertically by setting the vertical prop to true.
This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.		booleanfalse

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.