Slider | Community Components - 21st | 21st

/Slider/

Slider

Enhanced shadcn/ui slider

Install

npx shadcn@latest add https://21st.dev/r/originui/slider

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

@radix-ui/react-slider

Source

originui.com

Published

1/20/2025

Install

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Install

Dependencies

Tags

Install

Dependencies

Tags

Install

Dependencies

Tags

Slider

Install

More examples

Dependencies

Source

Published

Similar components