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>Slider with square thumb</Label>
<Slider
defaultValue={[25]}
max={100}
step={10}
className="[&>:last-child>span]:rounded"
aria-label="Slider with square thumb"
/>
</div>
);
}
export { Component };
More examples
DefaultOpen page →
Loading preview...
Disabled sliderOpen 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 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...