Slider

An input where the user selects a value from within a given range.

Usage

import { Slider, SliderValue } from "mako-ui/components/slider"

<Slider />

API Reference

Slider

Root component. Includes default min/max values and edge-aligned thumbs.

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum value of the slider
`max`	`number`	`100`	Maximum value of the slider

Note: The component sets thumbAlignment="edge" by default, which aligns thumbs to the edge of the track rather than centering them.

SliderValue

Displays the current value.

Examples

For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Slider field.

With Label and Value

Opacity50

import { Field, FieldLabel } from "mako-ui/components/field";
import { Slider, SliderValue } from "mako-ui/components/slider";

export default function Particle() {
  return (
    <Field>
      <Slider defaultValue={50}>
        <div className="mb-2 flex items-center justify-between gap-1">
          <FieldLabel className="font-medium text-sm">Opacity</FieldLabel>
          <SliderValue />
        </div>
      </Slider>
    </Field>
  );
}

Range Slider

Vertical

import { Slider } from "mako-ui/components/slider";

export default function Particle() {
  return (
    <div>
      <Slider
        aria-label="Storage size in GB"
        defaultValue={15}
        max={35}
        min={5}
      />
      <div
        aria-hidden="true"
        className="mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs"
      >
        <span>5 GB</span>
        <span>20 GB</span>
        <span>35 GB</span>
      </div>
    </div>
  );
}

Form Integration

import { Slider } from "mako-ui/components/slider";
import { cn } from "mako-ui/lib/utils";

const max = 12;
const skipInterval = 2;
const ticks = Array.from({ length: max + 1 }, (_, i) => i);

export default function Particle() {
  return (
    <div>
      <Slider aria-label="Value selector" defaultValue={5} max={max} />
      <div
        aria-hidden="true"
        className="mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs"
      >
        {ticks.map((tick) => (
          <span
            className="flex w-0 flex-col items-center justify-center gap-2"
            key={tick}
          >
            <span
              className={cn(
                "h-1 w-px bg-muted-foreground/72",
                tick % skipInterval !== 0 && "h-0.5",
              )}
            />
            <span className={cn(tick % skipInterval !== 0 && "opacity-0")}>
              {tick}
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}

On This Page

Usage API Reference Slider SliderValue Examples With Label and Value Range Slider Vertical Form Integration