MC Slider React component

Overview

The mc-slider is a core component of Micro Club UI. Built on the @base-ui/react slider primitive, it provides an accessible, keyboard-friendly range control with Micro Club's signature styling via Tailwind CSS v4.

As part of Micro Club UI, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

import { McSlider } from '@/components/ui/mc-slider';export default function SliderDemo() {  return <McSlider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;}

Add to Your Project

Deploy the mc-slider directly to your components/ui directory:

npx mcoli-ui@latest add mc-slider

pnpm dlx mcoli-ui@latest add mc-slider

yarn dlx mcoli-ui@latest add mc-slider

bunx mcoli-ui@latest add mc-slider

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy the source code

'use client';import * as React from 'react';import { Slider as SliderPrimitive } from '@base-ui/react/slider';import { cn } from '@/lib/utils';function McSlider({  className,  defaultValue,  value,  min = 0,  max = 100,  showValue = true,  border = false,  unit,  unity,  thumbAriaLabel,  onValueChange,  ...props}: SliderPrimitive.Root.Props & {  showValue?: boolean;  border?: boolean;  /** Suffix displayed after the value, e.g. "%". */  unit?: string;  /** @deprecated Use `unit` instead. */  unity?: string;  /** Accessible name for the thumb's input, e.g. "Team size". */  thumbAriaLabel?: string;}) {  const valueUnit = unit ?? unity;  const isControlled = value !== undefined;  const [internalValues, setInternalValues] = React.useState<number[]>(    Array.isArray(defaultValue) ? defaultValue : [min]  );  const values = isControlled ? (Array.isArray(value) ? value : [value]) : internalValues;  return (    <SliderPrimitive.Root      className={cn(        'data-horizontal:w-full data-vertical:h-full',        showValue && 'data-horizontal:mt-12',        className      )}      data-slot="slider"      defaultValue={defaultValue}      value={value}      min={min}      max={max}      thumbAlignment="edge-client-only"      onValueChange={(newValues, event) => {        if (!isControlled) {          setInternalValues(Array.isArray(newValues) ? newValues : [newValues]);        }        onValueChange?.(newValues, event);      }}      {...props}    >      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">        <SliderPrimitive.Track          data-slot="slider-track"          className="relative grow overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-ring select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"        >          <SliderPrimitive.Indicator            data-slot="slider-range"            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"          />        </SliderPrimitive.Track>        {values.map((currentValue, index) => (          <SliderPrimitive.Thumb            key={index}            data-slot="slider-thumb"            getAriaLabel={thumbAriaLabel ? () => thumbAriaLabel : undefined}            className="group relative block size-3 shrink-0 rounded-full border-2 border-primary bg-muted ring-accent-foreground backdrop-blur-3xl transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 active:bg-primary data-disabled:pointer-events-none data-disabled:bg-primary"          >            {showValue && (              <div                className={cn(                  'pointer-events-none absolute bottom-full left-1/2 mb-3 -translate-x-1/2 whitespace-nowrap rounded-xl ',                  'px-3.5 py-2.5 gap-2.5  text-md text-foreground bg-transparent ',                  border && 'ring-1 ring-inset ring-border bg-muted'                )}              >                {currentValue} {valueUnit}              </div>            )}          </SliderPrimitive.Thumb>        ))}      </SliderPrimitive.Control>    </SliderPrimitive.Root>  );}export { McSlider };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import { McSlider } from '@/components/ui/mc-slider';

export default function Example() {
  return <McSlider defaultValue={[50]} max={100} step={1} />;
}

Examples

Basic

<McSlider defaultValue={[40]} max={100} step={1} />

Range

<McSlider defaultValue={[20, 80]} max={100} step={1} />

With value labels

<McSlider defaultValue={[60]} max={100} step={1} unit="%" />

With border and custom label styling

<McSlider defaultValue={[35]} max={100} step={1} showValue border unit="°C" />

Vertical

<McSlider defaultValue={[60]} max={100} orientation="vertical" className="h-48" />

Disabled

<McSlider defaultValue={[35]} max={100} disabled />

API Reference

Props

Prop	Type	Default	Description
`defaultValue`	`number[]`	`undefined`	Initial value(s) for the slider
`value`	`number[]`	`undefined`	Controlled value(s)
`min`	`number`	`0`	Minimum slider value
`max`	`number`	`100`	Maximum slider value
`step`	`number`	`1`	Increment step
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slider orientation
`disabled`	`boolean`	`false`	Disables interaction
`showValue`	`boolean`	`true`	Shows the floating value badge above each thumb
`border`	`boolean`	`false`	Adds a bordered value badge style
`unit`	`string`	`undefined`	Optional suffix displayed next to the current value
`unity`	`string`	`undefined`	Deprecated alias of `unit`
`className`	`string`	`undefined`	Additional CSS classes

All other props from @base-ui/react/slider are supported.

MC Slider

On this page