) } export default ExpandableSlider `,highlightedCodeHtml:`

import { Volume2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"

function ExpandableSlider() {
  return (
    <div className="relative flex w-[120px] items-center">
      <Button className="peer" variant="link" size={"icon"}>
        <Volume2Icon className="h-5 w-5" />
        <span className="sr-only">Mute</span>
      </Button>

      <Slider
        className="w-0 self-stretch overflow-hidden transition-all peer-hover:w-full peer-hover:overflow-visible hover:w-full hover:overflow-visible focus-visible:w-full focus-visible:overflow-visible has-[[data-slot='slider-thumb']:focus-visible]:w-full has-[[data-slot='slider-thumb']:focus-visible]:overflow-visible"
        defaultValue={[50]}
      />
    </div>
  )
}

export default ExpandableSlider

`}),` `,(0,l.jsx)(s.h2,{children:"Installation"}),` `,(0,l.jsx)(e,{registryName:"https://ui.booleanfields.com/r/block-expandable-slider.json"}),` `,(0,l.jsx)(s.h2,{children:"Vertical"}),` `,(0,l.jsx)(a,{name:"block_expandable-slider-vertical",rawCodeString:`import { Volume2Icon } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" function ExpandableSliderVertical() { return (

) } export default ExpandableSliderVertical `,highlightedCodeHtml:`

import { Volume2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"

function ExpandableSliderVertical() {
  return (
    <div className="relative flex h-[120px] flex-col-reverse items-center">
      <Button className="peer" variant="link" size={"icon"}>
        <Volume2Icon className="h-5 w-5" />
        <span className="sr-only">Mute</span>
      </Button>

      <Slider
        className="overflow-hidden transition-all peer-hover:overflow-visible hover:h-full hover:overflow-visible focus-visible:h-full focus-visible:overflow-visible has-[[data-slot='slider-thumb']:focus-visible]:h-full has-[[data-slot='slider-thumb']:focus-visible]:overflow-visible data-[orientation=vertical]:h-0 data-[orientation=vertical]:min-h-0 data-[orientation=vertical]:w-full peer-hover:data-[orientation=vertical]:h-full hover:data-[orientation=vertical]:h-full"
        orientation="vertical"
        defaultValue={[50]}
      />
    </div>
  )
}

export default ExpandableSliderVertical

`}),` `,(0,l.jsx)(s.h2,{children:"Installation"}),` `,(0,l.jsx)(e,{registryName:"https://ui.booleanfields.com/r/block-expandable-slider-vertical.json"})]})}function x(n={}){let{wrapper:s}=n.components||{};return s?(0,l.jsx)(s,Object.assign({},n,{children:(0,l.jsx)(i,n)})):i(n)}var C=x;function E(n,s){throw new Error("Expected "+(s?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(w);})(); ;return Component;

Expandable Slider

Installation

Vertical

Installation