Inputs

Slider

Choose one or multiple values from a specified range.

Radix Docs API Reference GitHub Storybook

Installation

1
Install dependencies:
npm install @radix-ui/react-slider

Add component:

Copy and paste the code into your project’s component directory. Do not forget to update the import paths.

// Tremor Slider [v0.1.0]
"use client"
import * as React from "react"import * as SliderPrimitive from "@radix-ui/react-slider"
import { cx, focusRing } from "@/lib/utils"
interface SliderProps  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {  ariaLabelThumb?: string}
const Slider = React.forwardRef<  React.ElementRef<typeof SliderPrimitive.Root>,  SliderProps>(({ className, ariaLabelThumb, ...props }, forwardedRef) => {  const value = props.value || props.defaultValue  return (    <SliderPrimitive.Root      ref={forwardedRef}      className={cx(        // base        "relative flex cursor-pointer touch-none select-none",        // orientation        "data-[orientation='horizontal']:w-full data-[orientation='horizontal']:items-center",        "data-[orientation='vertical']:h-full data-[orientation='vertical']:w-fit data-[orientation='vertical']:justify-center",        // disabled        "data-[disabled]:pointer-events-none",        className,      )}      tremor-id="tremor-raw"      {...props}    >      <SliderPrimitive.Track        className={cx(          // base          "relative grow overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800",          // orientation          "data-[orientation='horizontal']:h-1.5 data-[orientation='horizontal']:w-full",          "data-[orientation='vertical']:h-full data-[orientation='vertical']:w-1.5",        )}      >        <SliderPrimitive.Range          className={cx(            // base            "absolute rounded-full bg-blue-500 dark:bg-blue-500",            // orientation            "data-[orientation='horizontal']:h-full",            "data-[orientation='vertical']:w-full",            // disabled            "data-[disabled]:bg-gray-300 dark:data-[disabled]:bg-gray-700",          )}        />      </SliderPrimitive.Track>      {value?.map((_, index) => (        <SliderPrimitive.Thumb          key={index}          className={cx(            // base            "block size-[17px] shrink-0 rounded-full border shadow transition-all",            // boder color            "border-gray-400 dark:border-gray-500",            // background color            "bg-white",            // disabled            "data-[disabled]:pointer-events-none data-[disabled]:bg-gray-200 dark:data-[disabled]:border-gray-800 dark:data-[disabled]:bg-gray-600",            focusRing,            "outline-offset-0",          )}          aria-label={ariaLabelThumb}        />      ))}    </SliderPrimitive.Root>  )})
Slider.displayName = SliderPrimitive.Root.displayName
export { Slider }

Example: With Range

"use client"
import { Slider } from "@/components/Slider"
export const SliderRangeExample = () => (  <Slider    defaultValue={[55, 75]}    className="mx-auto my-8 data-[orientation='horizontal']:w-[65%]"  />)

Example: Step size 10 and max value 50

"use client"
import { Slider } from "@/components/Slider"
export const SliderStepMaxExample = () => (  <Slider    defaultValue={[20]}    step={10}    max={50}    className="mx-auto my-8 data-[orientation='horizontal']:w-[65%]"  />)

Example: Vertical orientation

"use client"
import { Slider } from "@/components/Slider"
export const SliderVerticalExample = () => (  <div className="h-48">    <Slider defaultValue={[55]} orientation="vertical" className="mx-auto" />  </div>)

Example: Controlled

Slider value:55, 75

"use client"
import React from "react"
import { Button } from "@/components/Button"import { Card } from "@/components/Card"import { Divider } from "@/components/Divider"import { Slider } from "@/components/Slider"
export const SliderControlledExample = () => {  const [value, setValue] = React.useState([55, 75])
  return (    <Card className="mx-auto w-96">      <form        onSubmit={(event) => {          // eslint-disable-next-line @typescript-eslint/no-unused-expressions          event.preventDefault(),            alert("Submitted: " + `${value[0]}, ${value[1]}`)        }}        onReset={() => setValue([55, 75])}      >        <Slider id="a" value={value} onValueChange={setValue} />        <Divider />        <div className="flex gap-4">          <Button type="submit" className="mt-2 w-fit">            Submit          </Button>
          <Button type="reset" variant="secondary" className="mt-2 w-fit">            Reset Input          </Button>        </div>      </form>      <Divider />      <p className="mt-2 text-sm text-gray-500">        Slider value:        <span className="ml-1 font-semibold text-gray-900 dark:text-gray-50">          {value[0]}, {value[1]}        </span>      </p>    </Card>  )}

API Reference: Slider

This component uses the Radix UI API.

ariaLabelThumb: Add an aria label to the thumb component.