Mcoli UI - MC Slider

Overview

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

As part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

import { McSlider } from '@/registry/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

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,  unity,  onValueChange,  ...props}: SliderPrimitive.Root.Props & {  showValue?: boolean;  border?: boolean;  unity?: string;}) {  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 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"            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 disabled:pointer-events-none disabled:opacity-50 disabled:bg-blue-500"          >            {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} {unity}              </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} unity="%" />

With border and custom label styling

<McSlider defaultValue={[35]} max={100} step={1} showValue border unity="°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
`unity`	`string`	`undefined`	Optional suffix displayed next to the current value
`className`	`string`	`undefined`	Additional CSS classes

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

MC Slider

On this page