This component no longer exists. It was in diceui/base’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
angle-slider-range-demo
diceui-base/angle-slider-range-demoRemovedExample
diceui/base publishes no description for this item.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/angle-slider-range-demo.jsonSource
1"use client";23import * as React from "react";4import {5 AngleSlider,6 AngleSliderRange,7 AngleSliderThumb,8 AngleSliderTrack,9 AngleSliderValue,10} from "@/registry/bases/base/ui/angle-slider";1112export default function AngleSliderRangeDemo() {13 const [value, setValue] = React.useState([90, 270]);1415 return (16 <div className="flex flex-col items-center gap-4">17 <AngleSlider18 value={value}19 onValueChange={setValue}20 max={360}21 min={0}22 step={5}23 size={80}24 minStepsBetweenThumbs={2}25 >26 <AngleSliderTrack>27 <AngleSliderRange />28 </AngleSliderTrack>29 <AngleSliderThumb index={0} />30 <AngleSliderThumb index={1} />31 <AngleSliderValue />32 </AngleSlider>33 <div className="flex flex-col gap-2 text-center text-sm">34 <p>35 <strong>Range:</strong> {value[0]}° - {value[1]}°36 </p>37 <p>38 <strong>Arc Length:</strong>{" "}39 {Math.abs((value[1] ?? 0) - (value[0] ?? 0))}°40 </p>41 </div>42 </div>43 );44}
What it pulls in
Other registry items
