Bugcrowd Design System

Bugcrowd Design System

Search/

Range slider

Last modified:

A sliding dial that sets a numeric value on a horizontal bar.

Back to top

Example of Range slider - default

<div class="bc-form__group">
  <label class="bc-label" for="cursor-speed-eg">Cursor speed</label>
  <div class="bc-range-slider">
    <input
      class="bc-range-slider__input"
      id="cursor-speed-eg"
      max="100"
      min="1"
      name="text-speed"
      type="range"
    />
  </div>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

The standard HTML range slider is a single-select input for numeric values in a range.

Use ARIA markup and JavaScript to support text values or multi-range selection.

Design

Last modified:

Accessibility

Last modified:

  • Avoid using where accurate selection is required --- consider mobile/touch and keyboard users.
  • Avoid large ranges, especially without stepped intervals.
  • Do not use input[type=range] for representing text values. Instead use the ARIA slider role and aria-valuetext.

Rationale

Last modified:

Use for numeric values in a range for users to select from.

Use for actions that take immediate effect.

For forms that require a submit action to confirm and send data, consider using radio buttons from Control input.

Use the step attribute to add equally-sized intervals limiting the number of selectable options. The default step value is 1.

For example: in a range of 0–100, there are 100 options to select from. Setting step="10" limits the number of options from 100 to 10.

Steps can be visually displayed using the --ticked Range slider variant.

Set the desired number of steps using the data-bc-range-slider-ticks data attribute. It visually supports 3–10 steps.

See also

Last modified: