Browse Components

All Components Accordion Badges Buttons Cards Checkbox Color Picker Date Picker Dialog Disclosure Empty Example Input Links Password Progress Radio Select Slider Spinner Switch Tables Tabs Textarea Toast Tooltips

Planned

AlertAlert DialogArea ChartAvatarBar ChartBreadcrumbBubble ChartBullet ChartButton GroupCalendarCollapsibleCombo ChartComboboxCommand MenuContext MenuData GridDonut ChartDrawerDropdown MenuFile UploadHeatmapHistogramHover CardInput GroupInput OTPLine ChartMenubarNavigation MenuNumber InputPaginationPie ChartPopoverRadar ChartRadial ProgressRange SliderResizable PanelsScatter PlotScroll AreaSegmented ControlSeparatorSheetSidebarSkeletonSparklineStacked Area ChartStacked Bar ChartStepperTag InputToggleToolbarTree ViewWaterfall Chart

Slider

Adjust a value within a defined range.

Basic

Drag the thumb or use arrow keys to adjust the value.

Volume50%

View Code

HTML

<div class="slider-field">
  <div class="slider-heading">
    <label for="volume">
      Volume
    </label>
    <output for="volume" data-unit="%">
      50%
    </output>
  </div>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1" value="50">
</div>

Stepped values

Use a defined increment for predictable adjustments.

Spacing24px

View Code

HTML

<div class="slider-field">
  <div class="slider-heading">
    <label for="spacing">
      Spacing
    </label>
    <output for="spacing" data-unit="px">
      24px
    </output>
  </div>
  <input id="spacing" name="spacing" type="range" min="12" max="40" step="4" value="24">
</div>

Disabled

Explain why a setting is unavailable.

Volume50%

View Code

HTML

<div class="slider-field">
  <div class="slider-heading">
    <label for="locked-volume">
      Volume
    </label>
    <output for="locked-volume" data-unit="%">
      50%
    </output>
  </div>
  <input
    id="locked-volume"
    name="locked-volume"
    type="range"
    disabled
    min="0"
    max="100"
    step="1"
    value="50"
  >
</div>

Right-to-left

Native range direction follows the document.

Volume50%

View Code

HTML

<div dir="rtl">
  <div class="slider-field">
    <div class="slider-heading">
      <label for="rtl-volume">
        Volume
      </label>
      <output for="rtl-volume" data-unit="%">
        50%
      </output>
    </div>
    <input
      id="rtl-volume"
      name="rtl-volume"
      type="range"
      min="0"
      max="100"
      step="1"
      value="50"
    >
  </div>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css slider.css slider.js

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/slider.css">
<script defer src="/library/assets/slider.js"></script>

9,734 bytes CSS including base · 404 bytes runtime JavaScript

Usage

Define a range

Set min, max and step to meaningful values. Include a visible label and optional output with units.

Preserve native controls

Arrow keys adjust the value; Home and End reach the limits. Native disabled, form submission and reset remain intact. Use a number input when exact typing is essential.

Show the value

Load slider.js to synchronize output on input and form reset. Dispatch input after programmatic changes. The range works without JavaScript.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.