import { Slider } from "@/components/ui/slider-with-tooltip"

export default function SliderDemo() {
  return <Slider defaultValue={[25]} max={100} />
}

`}),` `,(0,s.jsx)(n.h2,{children:"Installation"}),` `,(0,s.jsxs)(p,{defaultValue:"cli",children:[(0,s.jsxs)(e,{children:[(0,s.jsx)(c,{value:"cli",children:"CLI"}),(0,s.jsx)(c,{value:"manual",children:"Manual"})]}),(0,s.jsx)(i,{value:"cli",children:(0,s.jsx)(y,{registryName:"https://ui.booleanfields.com/r/slider-with-tooltip.json"})}),(0,s.jsx)(i,{value:"manual",children:(0,s.jsxs)(F,{children:[(0,s.jsx)(t,{children:"Install the following dependencies:"}),(0,s.jsx)(d,{packageName:"@radix-ui/react-slider"}),(0,s.jsx)(t,{children:"Copy and paste the following code into your project."}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"/slider-with-tooltip.tsx"})}),(0,s.jsx)(u,{name:"slider-with-tooltip",rawCodeString:`"use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" function Slider({ className, defaultValue, value, min = 0, max = 100, step = 1, orientation = "horizontal", inverted = false, onPointerMove, onPointerLeave, disabled, ...props }: React.ComponentProps) { const _values = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max] ) const decimalPlaces = React.useMemo(() => { const stepStr = step.toString() const dotIndex = stepStr.indexOf(".") return dotIndex === -1 ? 0 : stepStr.length - dotIndex - 1 }, [step]) const [tooltip, setTooltip] = React.useState<{ value: string | null coords: { x: number; y: number } }>({ value: null, coords: { x: 0, y: 0 } }) const handlePointerMove = React.useCallback( (event: React.PointerEvent) => { onPointerMove?.(event) if (disabled) return const sliderElement = event.currentTarget const sliderRect = sliderElement.getBoundingClientRect() const isVertical = orientation === "vertical" let valueUnderPointer: number | null = null let pointerOffsetFromStart: number let sliderSize: number if (isVertical) { pointerOffsetFromStart = event.clientY - sliderRect.top sliderSize = sliderRect.height } else { pointerOffsetFromStart = event.clientX - sliderRect.left sliderSize = sliderRect.width } if ( sliderSize === 0 || pointerOffsetFromStart < 0 || pointerOffsetFromStart > sliderSize ) { valueUnderPointer = null } else { const pointerPositionAsFraction = Math.max( 0, Math.min(1, pointerOffsetFromStart / sliderSize) ) const range = max - min let rawValueAtPointer if (isVertical) { if (inverted) { rawValueAtPointer = min + pointerPositionAsFraction * range } else { rawValueAtPointer = max - pointerPositionAsFraction * range } } else { if (inverted) { rawValueAtPointer = max - pointerPositionAsFraction * range } else { rawValueAtPointer = min + pointerPositionAsFraction * range } } // Calculate the value closest to the pointer position that aligns with the specified step. valueUnderPointer = Math.round(rawValueAtPointer / step) * step valueUnderPointer = Math.max(min, Math.min(max, valueUnderPointer)) } if (valueUnderPointer !== null) { let tooltipAnchorX: number let tooltipAnchorY: number if (isVertical) { tooltipAnchorX = 0 // Anchor to the right edge tooltipAnchorY = pointerOffsetFromStart // Anchor to mouse Y relative to slider top } else { tooltipAnchorX = pointerOffsetFromStart // Anchor to mouse X relative to slider left tooltipAnchorY = 0 // Anchor to top edge } const formattedValue = Number(valueUnderPointer).toFixed(decimalPlaces) setTooltip({ value: formattedValue, coords: { x: tooltipAnchorX, y: tooltipAnchorY }, }) } else { setTooltip({ value: null, coords: { x: 0, y: 0 } }) } }, [min, max, step, orientation, inverted, decimalPlaces, onPointerMove] ) const handlePointerLeave = React.useCallback( (event: React.PointerEvent) => { onPointerLeave?.(event) if (disabled) return setTooltip({ value: null, coords: { x: 0, y: 0 } }) }, [onPointerLeave] ) return ( {Array.from({ length: _values.length }, (_, index) => ( ))} {tooltip.value !== null && ( {tooltip.value} )} ) } export { Slider } `,highlightedCodeHtml:`

"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  step = 1,
  orientation = "horizontal",
  inverted = false,
  onPointerMove,
  onPointerLeave,
  disabled,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max]
  )

  const decimalPlaces = React.useMemo(() => {
    const stepStr = step.toString()
    const dotIndex = stepStr.indexOf(".")
    return dotIndex === -1 ? 0 : stepStr.length - dotIndex - 1
  }, [step])

  const [tooltip, setTooltip] = React.useState<{
    value: string | null
    coords: { x: number; y: number }
  }>({ value: null, coords: { x: 0, y: 0 } })

  const handlePointerMove = React.useCallback(
    (event: React.PointerEvent<HTMLDivElement>) => {
      onPointerMove?.(event)

      if (disabled) return

      const sliderElement = event.currentTarget
      const sliderRect = sliderElement.getBoundingClientRect()
      const isVertical = orientation === "vertical"

      let valueUnderPointer: number | null = null
      let pointerOffsetFromStart: number
      let sliderSize: number

      if (isVertical) {
        pointerOffsetFromStart = event.clientY - sliderRect.top
        sliderSize = sliderRect.height
      } else {
        pointerOffsetFromStart = event.clientX - sliderRect.left
        sliderSize = sliderRect.width
      }

      if (
        sliderSize === 0 ||
        pointerOffsetFromStart < 0 ||
        pointerOffsetFromStart > sliderSize
      ) {
        valueUnderPointer = null
      } else {
        const pointerPositionAsFraction = Math.max(
          0,
          Math.min(1, pointerOffsetFromStart / sliderSize)
        )
        const range = max - min
        let rawValueAtPointer

        if (isVertical) {
          if (inverted) {
            rawValueAtPointer = min + pointerPositionAsFraction * range
          } else {
            rawValueAtPointer = max - pointerPositionAsFraction * range
          }
        } else {
          if (inverted) {
            rawValueAtPointer = max - pointerPositionAsFraction * range
          } else {
            rawValueAtPointer = min + pointerPositionAsFraction * range
          }
        }

        // Calculate the value closest to the pointer position that aligns with the specified step.
        valueUnderPointer = Math.round(rawValueAtPointer / step) * step

        valueUnderPointer = Math.max(min, Math.min(max, valueUnderPointer))
      }

      if (valueUnderPointer !== null) {
        let tooltipAnchorX: number
        let tooltipAnchorY: number

        if (isVertical) {
          tooltipAnchorX = 0 // Anchor to the right edge
          tooltipAnchorY = pointerOffsetFromStart // Anchor to mouse Y relative to slider top
        } else {
          tooltipAnchorX = pointerOffsetFromStart // Anchor to mouse X relative to slider left
          tooltipAnchorY = 0 // Anchor to top edge
        }

        const formattedValue = Number(valueUnderPointer).toFixed(decimalPlaces)
        setTooltip({
          value: formattedValue,
          coords: { x: tooltipAnchorX, y: tooltipAnchorY },
        })
      } else {
        setTooltip({ value: null, coords: { x: 0, y: 0 } })
      }
    },
    [min, max, step, orientation, inverted, decimalPlaces, onPointerMove]
  )

  const handlePointerLeave = React.useCallback(
    (event: React.PointerEvent<HTMLDivElement>) => {
      onPointerLeave?.(event)

      if (disabled) return

      setTooltip({ value: null, coords: { x: 0, y: 0 } })
    },
    [onPointerLeave]
  )

  return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      step={step}
      orientation={orientation}
      inverted={inverted}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
      disabled={disabled}
      className={cn(
        "relative flex touch-none items-center select-none data-[disabled]:opacity-50",
        "data-[orientation=horizontal]:h-5 data-[orientation=horizontal]:w-full",
        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-5 data-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={cn(
          "bg-muted relative grow overflow-hidden rounded-full",
          "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full",
          "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
        )}
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
            "bg-primary absolute",
            "data-[orientation=horizontal]:h-full",
            "data-[orientation=vertical]:w-full"
          )}
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
      {tooltip.value !== null && (
        <span
          className={cn(
            "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-50 absolute z-50 origin-bottom transform rounded-md px-3 py-1.5 text-xs shadow-lg before:absolute before:border-transparent before:content-['']",
            orientation === "horizontal" &&
              "-translate-x-1/2 translate-y-[calc(-100%-8px)] before:top-full before:left-1/2 before:-ml-[4px] before:border-[4px] before:border-t-[var(--primary)]",
            orientation === "vertical" &&
              "translate-x-[calc(-100%-10px)] -translate-y-1/2 before:top-1/2 before:left-full before:-mt-[4px] before:border-[4px] before:border-l-[var(--primary)]"
          )}
          style={{
            left: \`\${tooltip.coords.x}px\`,
            top: \`\${tooltip.coords.y}px\`,
          }}
        >
          {tooltip.value}
        </span>
      )}
    </SliderPrimitive.Root>
  )
}

export { Slider }

`}),(0,s.jsx)(t,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,s.jsx)(n.h2,{children:"Usage"}),` `,(0,s.jsx)(E,{rawCodeString:'import { SliderWithTooltip } from "@/components/ui/slider-with-tooltip"',highlightedCodeHtml:'

import { SliderWithTooltip } from "@/components/ui/slider-with-tooltip"

',language:"tsx"}),` `,(0,s.jsx)(E,{rawCodeString:"",highlightedCodeHtml:'

<SliderWithTooltip defaultValue={[33]} max={100} />

',language:"tsx"}),` `,(0,s.jsx)(n.h2,{children:"Examples"}),` `,(0,s.jsx)(n.h3,{children:"Default"}),` `,(0,s.jsx)(l,{name:"slider-with-tooltip-demo",className:"[&_[data-slot='slider']]:md:w-3/5",rawCodeString:`import { Slider } from "@/components/ui/slider-with-tooltip" export default function SliderDemo() { return } `,highlightedCodeHtml:`

import { Slider } from "@/components/ui/slider-with-tooltip"

export default function SliderDemo() {
  return <Slider defaultValue={[25]} max={100} />
}

`}),` `,(0,s.jsx)(n.h3,{children:"Vertical"}),` `,(0,s.jsx)(l,{name:"slider-with-tooltip-vertical-demo",rawCodeString:`import { Slider } from "@/components/ui/slider-with-tooltip" export default function SliderDemo() { return } `,highlightedCodeHtml:`

import { Slider } from "@/components/ui/slider-with-tooltip"

export default function SliderDemo() {
  return <Slider defaultValue={[25]} orientation="vertical" max={100} />
}

`}),` `,(0,s.jsx)(n.h3,{children:"Disabled"}),` `,(0,s.jsx)(l,{name:"slider-with-tooltip-disabled-demo",className:"[&_[data-slot='slider']]:md:w-3/5",rawCodeString:`import { Slider } from "@/components/ui/slider-with-tooltip" export default function SliderWithTooltipDisabledDemo() { return } `,highlightedCodeHtml:`

import { Slider } from "@/components/ui/slider-with-tooltip"

export default function SliderWithTooltipDisabledDemo() {
  return <Slider defaultValue={[50]} max={100} disabled />
}

`})]})}function k(a={}){let{wrapper:n}=a.components||{};return n?(0,s.jsx)(n,Object.assign({},a,{children:(0,s.jsx)(B,a)})):B(a)}var R=k;function o(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(T);})(); ;return Component;

Slider With Tooltip

Installation

Usage

Examples

Default

Vertical

Disabled