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 solid thumb</Label>
<Slider
defaultValue={[25]}
className="[&>:first-child>span]:opacity-70 [&>:last-child>span]:bg-primary"
aria-label="Slider with solid thumb"
/>
</div>
);
}
export { Component };
More examples
DefaultOpen page →
Loading preview...
Disabled sliderOpen page →
Loading preview...
Slider with square 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...
Dependencies
Source
Published
Similar components
Explore more
Part of Origin UI — browse the full library on 21st.dev.