From f71ade25448e75238fd6bab7757721374f555994 Mon Sep 17 00:00:00 2001
From: Keagan Chisnall <keagan@chisnall.io>
Date: Sun, 12 Oct 2025 09:15:15 +1000
Subject: [PATCH 1/2] refactor(slider): add pointer cursor to track and thumb

---
 .../registry/new-york-v4/ui/slider/Slider.vue | 86 +++++++++----------
 .../src/public/r/styles/default/slider.json   |  2 +-
 .../public/r/styles/new-york-v4/slider.json   |  2 +-
 .../src/public/r/styles/new-york/slider.json  |  2 +-
 .../src/registry/default/ui/slider/Slider.vue | 66 +++++++-------
 .../registry/new-york/ui/slider/Slider.vue    | 66 +++++++-------
 6 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/apps/v4/registry/new-york-v4/ui/slider/Slider.vue b/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
index d39938c03..15e12eaa5 100644
--- a/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
+++ b/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    v-slot="{ modelValue }"
-    data-slot="slider"
-    :class="cn(
-      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack
-      data-slot="slider-track"
-      class="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"
-    >
-      <SliderRange
-        data-slot="slider-range"
-        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-      />
-    </SliderTrack>
-
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      data-slot="slider-thumb"
-      class="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"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="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 cursor-pointer"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>
diff --git a/apps/www/src/public/r/styles/default/slider.json b/apps/www/src/public/r/styles/default/slider.json
index b2f1038f8..22ec518de 100644
--- a/apps/www/src/public/r/styles/default/slider.json
+++ b/apps/www/src/public/r/styles/default/slider.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/slider/Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary cursor-pointer\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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 cursor-pointer\"\n    />\n  </SliderRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york-v4/slider.json b/apps/www/src/public/r/styles/new-york-v4/slider.json
index ef5152c9c..14ed0fb57 100644
--- a/apps/www/src/public/r/styles/new-york-v4/slider.json
+++ b/apps/www/src/public/r/styles/new-york-v4/slider.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/slider/Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    v-slot=\"{ modelValue }\"\n    data-slot=\"slider\"\n    :class=\"cn(\n      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack\n      data-slot=\"slider-track\"\n      class=\"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\"\n    >\n      <SliderRange\n        data-slot=\"slider-range\"\n        class=\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n      />\n    </SliderTrack>\n\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      data-slot=\"slider-thumb\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    v-slot=\"{ modelValue }\"\n    data-slot=\"slider\"\n    :class=\"cn(\n      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack\n      data-slot=\"slider-track\"\n      class=\"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 cursor-pointer\"\n    >\n      <SliderRange\n        data-slot=\"slider-range\"\n        class=\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n      />\n    </SliderTrack>\n\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      data-slot=\"slider-thumb\"\n      class=\"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 cursor-pointer\"\n    />\n  </SliderRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/src/public/r/styles/new-york/slider.json b/apps/www/src/public/r/styles/new-york/slider.json
index f242d4442..9c7f35b8c 100644
--- a/apps/www/src/public/r/styles/new-york/slider.json
+++ b/apps/www/src/public/r/styles/new-york/slider.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/slider/Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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\"\n    />\n  </SliderRoot>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SliderRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<SliderRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20 cursor-pointer\">\n      <SliderRange class=\"absolute h-full data-[orientation=vertical]:w-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb\n      v-for=\"(_, key) in modelValue\"\n      :key=\"key\"\n      class=\"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 cursor-pointer\"\n    />\n  </SliderRoot>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/src/registry/default/ui/slider/Slider.vue b/apps/www/src/registry/default/ui/slider/Slider.vue
index 591805fc7..83f9e66e7 100644
--- a/apps/www/src/registry/default/ui/slider/Slider.vue
+++ b/apps/www/src/registry/default/ui/slider/Slider.vue
@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    :class="cn(
-      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary">
-      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
-    </SliderTrack>
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      class="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"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary cursor-pointer">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/slider/Slider.vue b/apps/www/src/registry/new-york/ui/slider/Slider.vue
index ac01c30fd..2c02876cf 100644
--- a/apps/www/src/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/registry/new-york/ui/slider/Slider.vue
@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    :class="cn(
-      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20">
-      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
-    </SliderTrack>
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      class="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"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20 cursor-pointer">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>

From babeb6cd6e2de1691c1a0e25334f6805422afaaa Mon Sep 17 00:00:00 2001
From: Keagan Chisnall <keagan@chisnall.io>
Date: Sun, 12 Oct 2025 09:35:23 +1000
Subject: [PATCH 2/2] refactor: add pointer cursor to slider track and thumb

---
 .../registry/new-york-v4/ui/slider/Slider.vue | 86 +++++++++----------
 .../src/registry/default/ui/slider/Slider.vue | 66 +++++++-------
 .../registry/new-york/ui/slider/Slider.vue    | 66 +++++++-------
 3 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/apps/v4/registry/new-york-v4/ui/slider/Slider.vue b/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
index 15e12eaa5..f764d9fe3 100644
--- a/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
+++ b/apps/v4/registry/new-york-v4/ui/slider/Slider.vue
@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    v-slot="{ modelValue }"
-    data-slot="slider"
-    :class="cn(
-      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack
-      data-slot="slider-track"
-      class="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 cursor-pointer"
-    >
-      <SliderRange
-        data-slot="slider-range"
-        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-      />
-    </SliderTrack>
-
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      data-slot="slider-thumb"
-      class="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 cursor-pointer"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="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 cursor-pointer"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>
diff --git a/apps/www/src/registry/default/ui/slider/Slider.vue b/apps/www/src/registry/default/ui/slider/Slider.vue
index 83f9e66e7..dd3b47795 100644
--- a/apps/www/src/registry/default/ui/slider/Slider.vue
+++ b/apps/www/src/registry/default/ui/slider/Slider.vue
@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    :class="cn(
-      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary cursor-pointer">
-      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
-    </SliderTrack>
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      class="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 cursor-pointer"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary cursor-pointer">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>
diff --git a/apps/www/src/registry/new-york/ui/slider/Slider.vue b/apps/www/src/registry/new-york/ui/slider/Slider.vue
index 2c02876cf..a559230b7 100644
--- a/apps/www/src/registry/new-york/ui/slider/Slider.vue
+++ b/apps/www/src/registry/new-york/ui/slider/Slider.vue
@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    :class="cn(
-      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20 cursor-pointer">
-      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
-    </SliderTrack>
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      class="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 cursor-pointer"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20 cursor-pointer">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="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 cursor-pointer"
+    />
+  </SliderRoot>
+</template>