Cell Slider

Usage

"use client";

import { CellSlider } from "@thenamespace/uikit";

const decimalProps = {

Anatomy

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

import { CellSlider } from "@thenamespace/uikit";

<CellSlider>
  <CellSlider.Label />
  <CellSlider.Output />
  <CellSlider.Track>
    <CellSlider.Fill />
    <CellSlider.Thumb />
  </CellSlider.Track>
</CellSlider>;

Controlled

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Disabled

"use client";

import { CellSlider } from "@thenamespace/uikit";

const decimalProps = {

Integer Step

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Secondary Group

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Settings Group

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Variants

"use client";

import { CellSlider } from "@thenamespace/uikit";

const decimalProps = {

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 Namespace UIKit Slider with cell-style layout. Always renders in horizontal orientation.

Also supports all Namespace UIKit Slider props except variant and orientation.

CellSlider.Track

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

Also supports all Namespace UIKit Slider.Track props.

CellSlider.Fill

Subtle accent tint showing the current slider value.

Also supports all Namespace UIKit 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 Namespace UIKit Slider.Thumb props.

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 Namespace UIKit Slider.Output props.