Single-thumb volume editing with the Minecraft slider.
Preview
Example source could not be loaded: slider-example. Reload this page to retry.Usage
Import Slider from @/components/ui/slider. Set value={[50]} or defaultValue={[50]} for one thumb. With neither prop, the wrapper defaults to [min, max], producing two thumbs. min and max default to 0 and 100.
Composition
label paints visible text inside the track. Also supply an accessible name with aria-label or aria-labelledby; the wrapper forwards that name to a single thumb. The example normalizes the onValueChange(next, details) number-or-array result into controlled array state. Honor event cancellation if adding validation. Use onValueCommitted for work that should happen after editing.
API and accessibility
Enter or Space switches the focused handle's editing mode. Native form reset restores uncontrolled bitmap state. The retained playground exercises drag/commit and disabled state. Multi-thumb ranges and multiple accessible thumb names are web extensions outside the single-thumb native reference claim. scale defaults to 2.
See the underlying API for shared semantics.
Locked volume
Example source could not be loaded: slider-disabled-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import {
DirectionProvider as BaseDirectionProvider,
useDirection as baseDirection,
} from "@base-ui/react/direction-provider";
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import { minecraftSliderSprites as sprites } from "./minecraft-slider-sprites";