# Cell Slider
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/cell-slider
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(forms)/cell-slider.mdx
> A range slider styled as a settings cell with label, value display, and step configuration
***
## Import
```tsx
import { CellSlider } from '@darkcode-ui/react';
```
## Usage
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function Default() {
return (
Brightness
);
}
```
## Anatomy
Import the CellSlider component and access all parts using dot notation.
```tsx
import { CellSlider } from '@darkcode-ui/react';
export default () => (
)
```
## Controlled
Pass `value` and `onChange` to control the slider value.
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
import {useState} from "react";
export function Controlled() {
const [value, setValue] = useState(40);
return (
setValue(v as number)}>
Volume
Current value: {value}
);
}
```
## Disabled
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function Disabled() {
return (
Brightness
);
}
```
## Integer Step
Use `step`, `minValue`, and `maxValue` to constrain the slider to whole numbers.
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function IntegerStep() {
return (
Players
);
}
```
## Secondary Group
Use `variant="secondary"` to render cells with the secondary surface style, ideal for stacked groups.
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function SecondaryGroup() {
return (
Brightness
Contrast
);
}
```
## Settings Group
Stack multiple cells inside a surface container to build a settings panel.
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function SettingsGroup() {
return (
Brightness
Volume
Warmth
);
}
```
## Variants
```tsx
"use client";
import {CellSlider} from "@darkcode-ui/react";
export function Variants() {
return (
Default
Secondary
);
}
```
## Styling
CellSlider wraps the [Slider](/react/components/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](/react/components/slider) with cell-style
layout. Always renders in horizontal orientation.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'default' \| 'secondary'` | `'default'` | Visual style variant. |
Also supports all [DarkCode UI Slider](/react/components/slider) props except `variant` and `orientation`.
### CellSlider.Label
Leading text label, absolutely positioned on the left.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | - | Label text. |
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](/react/components/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](https://react-spectrum.adobe.com/react-aria/Slider.html).