Slider

Drag control for adjusting a value within a range.

Installation

npx shadcn@latest add @iconiq/r-slider

File Structure

Usage

"use client";

import { useState } from "react";
import { Slider } from "@/components/ui/r-slider";
const marks = [
  { value: 0, label: "Low" },
  { value: 50, label: "Cruise" },
  { value: 100, label: "Peak" },
];

export function SliderPreview() {
  const [value, setValue] = useState(42);

  return (
    <Slider
      className="w-full max-w-sm"
      label="Intensity"
      marks={marks}
      onChange={setValue}
      value={value}
    />
  );
}

Props

Props
Description

Slider

value

Controlled value. Use a number for single-thumb mode or a tuple when range is enabled.

Type number | [number, number]

defaultValue

Initial internal value used when value is not supplied. Defaults to [25, 75] when range is true.

Type number | [number, number]·Default 50

range

Renders two thumbs and fills the track between the low and high values.

Type boolean·Default false

min

Lower bound used for clamping and display mapping.

Type number·Default 0

max

Upper bound used for clamping and display mapping.

Type number·Default 100

step

Step size applied after translating pointer position into a raw numeric value.

Type number·Default 1

onChange

Called for live value updates from pointer or keyboard input when the snapped value actually changes.

Type (value: number | [number, number]) => void

onValueCommit

Called when an interaction is committed, such as releasing a drag or finishing a keyboard step.

Type (value: number | [number, number]) => void

showValue

Controls whether the live numeric readout is shown on the right side of the label row.

Type boolean·Default true

valueDecimals

Controls how many decimal places are shown in the readout when you want precision without custom formatting.

Type number·Default 0

formatValue

Optional formatter for the visible readout and aria-valuetext, useful for units such as dB, percent, or milliseconds.

Type (value: number) => string

label

Optional label shown on the left side of the header row above the track.

Type string

description

Optional helper text rendered below the track and linked through aria-describedby.

Type ReactNode

errorMessage

Validation message rendered below the track with alert semantics when present.

Type ReactNode

invalid

Marks the slider as invalid for assistive tech even when no errorMessage is rendered.

Type boolean

disabled

Prevents interaction, removes the slider from tab order, and applies disabled styling.

Type boolean·Default false

readOnly

Keeps the slider focusable while blocking pointer and keyboard value changes.

Type boolean·Default false

className

Merged onto the root wrapper so you can constrain width, spacing, or layout.

Type string

size

Scales the hit area, thumb, and track thickness together while preserving the default md footprint.

Type "sm" | "md" | "lg"·Default md

inverted

Reverses pointer and keyboard direction. RTL documents also reverse horizontal pointer mapping.

Type boolean·Default false

marksInteractive

Turns tick marks into buttons that jump the nearest thumb to the mark value.

Type boolean·Default false

name

When provided, renders hidden inputs so the current value can participate in native form submission.

Type string

id

Optional id applied to the focusable slider element and used to derive description and error ids.

Type string

ariaLabel

Accessible name used when no visible label is rendered for the slider. Falls back to Slider.

Type string

ariaLabelledBy

ID of an external label element that should be announced instead of the built-in label.

Type string

ariaDescribedBy

Additional ids merged into aria-describedby alongside description and errorMessage.

Type string

marks

Optional tick marks rendered below or beside the track so large ranges can include landmarks like Low, Medium, and High.

Type { value: number; label?: string }[]

Interaction model

Slider supports pointer, keyboard, and screen-reader friendly range semantics.

Built on Radix Slider.Root, Slider.Track, Slider.Range, and Slider.Thumb while preserving the same active track-height animation, spring-smoothed fill, and thumb scale behavior as the core slider.

The thumb and filled track animate with springs whenever the current value changes.

Pointer capture is taken on pointer down and released on pointer up or cancel, which keeps dragging stable even when the pointer leaves the track.

Keyboard support includes Arrow keys for step changes, Page Up and Page Down for larger jumps, and Home and End for min and max.

Range mode tracks an active thumb during keyboard and pointer interaction so the nearest endpoint moves first.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-slider, motion.

Installs a Radix slider with the same value, range, marks, formatting, and field chrome API as the Base UI version.

Uses the Radix slider track, range, and thumb primitives under the same Iconiq track and thumb motion shell.

The generated registry file is /r/r-slider.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Intensity42