shipbase/ui

import { Slider, SliderControl } from "@/components/ui/slider"

export default function SliderDemo() {
  return (
    <Slider defaultValue={[10]} className="w-[60%]">
      <SliderControl />
    </Slider>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { Slider as SliderPrimitive } from "@ark-ui/react/slider"

const Slider = SliderPrimitive.Root

const SliderLabel = SliderPrimitive.Label

const SliderValueText = SliderPrimitive.ValueText

const SliderMarkGroup = SliderPrimitive.MarkerGroup

const SliderMark = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Marker>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Marker>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Marker
    ref={ref}
    className="before:-top-1.5 before:-translate-x-1/2 text-muted-foreground text-sm before:relative before:left-1/2 before:block before:size-1 before:rounded-full before:bg-background before:content-[''] dark:before:bg-foreground dark:before:data-[state='under-value']:bg-background"
    {...props}
  />
))

const SliderControl = () => (
  <SliderPrimitive.Control className="flex items-center rounded-full">
    <SliderPrimitive.Track className="h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Context>
      {(context) =>
        context.value.map((value, index) => (
          <SliderPrimitive.Thumb
            index={index}
            key={value}
            className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
          >
            <SliderPrimitive.HiddenInput />
          </SliderPrimitive.Thumb>
        ))
      }
    </SliderPrimitive.Context>
  </SliderPrimitive.Control>
)

export {
  Slider,
  SliderControl,
  SliderLabel,
  SliderMark,
  SliderMarkGroup,
  SliderValueText,
}

Not Found

Update the import paths to match your project setup.

Usage

import { Slider, SliderControl } from "@/components/ui/slider"

<Slider defaultValue={[10]}>
  <SliderControl />
</Slider>

Examples

With label and value text

Slider: 30

import {
  Slider,
  SliderControl,
  SliderLabel,
  SliderValueText,
} from "@/components/ui/slider"

export default function SliderDemo() {
  return (
    <Slider defaultValue={[30]} className="w-[60%] space-y-2">
      <SliderLabel>Slider: </SliderLabel>
      <SliderValueText />
      <SliderControl />
    </Slider>
  )
}

Slider Range

Slider Range: 10, 50

import {
  Slider,
  SliderControl,
  SliderLabel,
  SliderValueText,
} from "@/components/ui/slider"

export default function SliderRangeDemo() {
  return (
    <Slider defaultValue={[10, 50]} className="w-[60%] space-y-2">
      <SliderLabel>Slider Range: </SliderLabel>
      <SliderValueText />
      <SliderControl />
    </Slider>
  )
}

With Mark

import {
  Slider,
  SliderControl,
  SliderMark,
  SliderMarkGroup,
} from "@/components/ui/slider"

export default function SliderDemo() {
  return (
    <Slider defaultValue={[10]} className="w-[60%]">
      <SliderControl />
      <SliderMarkGroup>
        <SliderMark value={25}>25</SliderMark>
        <SliderMark value={50}>50</SliderMark>
        <SliderMark value={75}>75</SliderMark>
      </SliderMarkGroup>
    </Slider>
  )
}