Components
Loading preview...
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
function Component() {
return (
<div className="space-y-4 min-w-[300px]">
<Label>Vertical slider</Label>
<div className="flex h-40 justify-center">
<Slider defaultValue={[5]} max={10} orientation="vertical" aria-label="Vertical slider" />
</div>
</div>
);
}
export { Component };
More examples
DefaultOpen page →
Loading preview...
Disabled sliderOpen page →
Loading preview...
Slider with square thumbOpen page →
Loading preview...
Slider with solid thumbOpen page →
Loading preview...
Slider with tiny thumbOpen page →
Loading preview...
Slider with reference labelsOpen page →
Loading preview...
Slider with ticksOpen page →
Loading preview...
Slider with outputOpen page →
Loading preview...
Slider with labelsOpen page →
Loading preview...
Slider with labels and tooltipOpen page →
Loading preview...
Dual range sliderOpen page →
Loading preview...
Dual range slider with outputOpen page →
Loading preview...
Volume sliderOpen page →
Loading preview...
Slider with multiple thumbsOpen page →
Loading preview...
Temperature sliderOpen page →
Loading preview...
Slider with inputOpen page →
Loading preview...
Rating SliderOpen page →
Loading preview...
Rating slider 2Open page →
Loading preview...
Dual range slider with inputOpen page →
Loading preview...
Slider with plus / munisOpen page →
Loading preview...
Price sliderOpen page →
Loading preview...
Vertical slider with inputOpen page →
Loading preview...
Vertical dual range slider and tooltipOpen page →
Loading preview...
Multiple sliders with reset buttonOpen page →
Loading preview...
Price slider with min / maxOpen page →
Loading preview...
Multiple vertical slidersOpen page →
Loading preview...