Slider

An input where the user selects a value from within a given range.

Preview

Code

import Slider from '@dinui/react/slider'
import { cn } from '@dinui/react/utils'

type SliderProps = React.ComponentProps<typeof Slider>

export default function SliderDemo({ className, ...props }: SliderProps) {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      className={cn('w-[60%]', className)}
      {...props}
    />
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add slider

   yarn

   yarn dlx @dinui/cli@latest add slider

   pnpm

   pnpm dlx @dinui/cli@latest add slider

   bun

   bunx @dinui/cli@latest add slider

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-slider tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-slider tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-slider tailwind-variants type-fest

   bun

   bun add @radix-ui/react-slider tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as SliderPrimitive from '@radix-ui/react-slider'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const slider = tv({
     slots: {
       root: 'relative flex w-full touch-none select-none items-center',
       track: 'relative h-1.5 w-full grow overflow-hidden rounded-full bg-bg--muted',
       range: 'absolute h-full bg-fg-brand',
       thumb:
         'block h-4 w-4 rounded-full border border-fg/70 bg-bg--contrast shadow transition-colors disabled:pointer-events-none disabled:opacity-50',
     },
   })
   
   const Slider = forwardRef<
     React.ElementRef<typeof SliderPrimitive.Root>,
     Merge<
       React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
       {
         trackProps?: React.ComponentProps<typeof SliderPrimitive.Track>
         rangeProps?: React.ComponentProps<typeof SliderPrimitive.Range>
         thumbProps?: React.ComponentProps<typeof SliderPrimitive.Thumb>
       }
     >
   >(({ trackProps, rangeProps, thumbProps, ...props }, ref) => {
     const { root, range, thumb, track } = slider()
   
     return (
       <SliderPrimitive.Root {...props} ref={ref} className={root({ className: props.className })}>
         <SliderPrimitive.Track
           {...trackProps}
           className={track({ className: trackProps?.className })}
         >
           <SliderPrimitive.Range
             {...rangeProps}
             className={range({ className: rangeProps?.className })}
           />
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb
           {...thumbProps}
           className={thumb({ className: thumbProps?.className })}
         />
       </SliderPrimitive.Root>
     )
   })
   Slider.displayName = SliderPrimitive.Root.displayName
   
   export default Slider
   export { slider, SliderPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.