Cell Slider

Import

import { CellSlider } from '@darkcode-ui/react';

Usage

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function Default() {

Anatomy

Import the CellSlider component and access all parts using dot notation.

import { CellSlider } from '@darkcode-ui/react';

export default () => (
  <CellSlider>
    <CellSlider.Label />
    <CellSlider.Output />
    <CellSlider.Track>
      <CellSlider.Fill />
      <CellSlider.Thumb />
    </CellSlider.Track>
  </CellSlider>
)

Controlled

Pass value and onChange to control the slider value.

"use client";

import {CellSlider} from "@darkcode-ui/react";
import {useState} from "react";

Disabled

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function Disabled() {

Integer Step

Use step, minValue, and maxValue to constrain the slider to whole numbers.

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function IntegerStep() {

Secondary Group

Use variant="secondary" to render cells with the secondary surface style, ideal for stacked groups.

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function SecondaryGroup() {

Settings Group

Stack multiple cells inside a surface container to build a settings panel.

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function SettingsGroup() {

Variants

"use client";

import {CellSlider} from "@darkcode-ui/react";

export function Variants() {

Styling

CellSlider wraps the Slider component, so all Slider styling patterns apply. The cell layout is provided by the BEM classes below.

CSS Classes

The CellSlider component uses the following CSS classes:

Base Classes

• .cell-slider - Root wrapper

Element Classes

• .cell-slider__track - The visible cell row (Slider.Track)
• .cell-slider__track--default - Default variant track styling
• .cell-slider__track--secondary - Secondary variant track styling
• .cell-slider__fill - Accent tint showing the current value
• .cell-slider__thumb - Transparent hit area with a ::after pill indicator
• .cell-slider__label - Leading text label (absolutely positioned left)
• .cell-slider__output - Value display (absolutely positioned right)

API Reference

CellSlider

The root component. Wraps DarkCode UI Slider with cell-style layout. Always renders in horizontal orientation.

Also supports all DarkCode UI Slider props except variant and orientation.

CellSlider.Label

Leading text label, absolutely positioned on the left.

Also supports all native span HTML attributes.

CellSlider.Output

Value display, absolutely positioned on the right.

Also supports all DarkCode UI Slider.Output props.

CellSlider.Track

The visible cell row serving as the slider track. Contains fill, thumb, label, and output as children.

Also supports all DarkCode UI Slider.Track props.

CellSlider.Fill

Subtle accent tint showing the current slider value.

Also supports all DarkCode UI Slider.Fill props.

CellSlider.Thumb

Transparent hit area for drag and keyboard accessibility. The visible indicator is a ::after pseudo-element (thin 3px pill).

Also supports all DarkCode UI Slider.Thumb props.

Accessibility

CellSlider is built on the same React Aria Slider primitive as the Slider component and provides:

• Full keyboard navigation support (Arrow keys, Home, End, Page Up/Down)
• Screen reader announcements for value changes
• Proper focus management
• Support for disabled states
• Internationalization with locale-aware value formatting

For more information, see the React Aria Slider documentation.