Cal.com
Components

Range Slider

View in AirtableView in Figma
Design:
Ready for dev
Dev:
Ready for review

Basic

Basic range slider for selecting numeric values.

Single Value: 50%
Range: 20% - 80%
Step Size 25: 25%
Disabled: 50%

With Popover

Range slider with a popover showing the current value.

Default Range (15-30 mins)

Custom Range with Success Badge (5-20 mins)

Large Range with Warning Badge (0-100 mins)

Selected Values:

{
  "defaultRange": [
    15,
    30
  ],
  "customRange": [
    5,
    20
  ],
  "largeRange": [
    0,
    100
  ]
}

On this page