[pull] main from chakra-ui:main

packages/react/src/components/slider/examples/thumb-collision.tsx

@@ -0,0 +1,24 @@
+import { Slider } from '@ark-ui/react/slider'
+import styles from 'styles/slider.module.css'
+
+export const ThumbCollision = () => {
+  return (
+    <Slider.Root thumbCollisionBehavior="push" defaultValue={[25, 60]} className={styles.Root}>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Slider.Label className={styles.Label}>Label</Slider.Label>
+        <Slider.ValueText className={styles.ValueText} />
+      </div>
+      <Slider.Control className={styles.Control}>
+        <Slider.Track className={styles.Track}>
+          <Slider.Range className={styles.Range} />
+        </Slider.Track>
+        <Slider.Thumb index={0} className={styles.Thumb}>
+          <Slider.HiddenInput />
+        </Slider.Thumb>
+        <Slider.Thumb index={1} className={styles.Thumb}>
+          <Slider.HiddenInput />
+        </Slider.Thumb>
+      </Slider.Control>
+    </Slider.Root>
+  )
+}

packages/react/src/components/slider/slider.stories.tsx

@@ -16,6 +16,7 @@ export { Range } from './examples/range'
 export { RootProvider } from './examples/root-provider'
 export { Step } from './examples/step'
 export { ThumbAlignment } from './examples/thumb-alignment'
+export { ThumbCollision } from './examples/thumb-collision'
 export { ThumbOverlap } from './examples/thumb-overlap'
 export { Vertical } from './examples/vertical'
 export { WithMarks } from './examples/with-marks'

packages/solid/src/components/slider/examples/thumb-collision.tsx

@@ -0,0 +1,24 @@
+import { Slider } from '@ark-ui/solid/slider'
+import styles from 'styles/slider.module.css'
+
+export const ThumbCollision = () => {
+  return (
+    <Slider.Root thumbCollisionBehavior="push" defaultValue={[25, 60]} class={styles.Root}>
+      <div style={{ display: 'flex', 'justify-content': 'space-between' }}>
+        <Slider.Label class={styles.Label}>Label</Slider.Label>
+        <Slider.ValueText class={styles.ValueText} />
+      </div>
+      <Slider.Control class={styles.Control}>
+        <Slider.Track class={styles.Track}>
+          <Slider.Range class={styles.Range} />
+        </Slider.Track>
+        <Slider.Thumb index={0} class={styles.Thumb}>
+          <Slider.HiddenInput />
+        </Slider.Thumb>
+        <Slider.Thumb index={1} class={styles.Thumb}>
+          <Slider.HiddenInput />
+        </Slider.Thumb>
+      </Slider.Control>
+    </Slider.Root>
+  )
+}

packages/solid/src/components/slider/slider.stories.tsx

@@ -16,6 +16,7 @@ export { Range } from './examples/range'
 export { RootProvider } from './examples/root-provider'
 export { Step } from './examples/step'
 export { ThumbAlignment } from './examples/thumb-alignment'
+export { ThumbCollision } from './examples/thumb-collision'
 export { ThumbOverlap } from './examples/thumb-overlap'
 export { Vertical } from './examples/vertical'
 export { WithMarks } from './examples/with-marks'

packages/svelte/src/lib/components/slider/examples/thumb-collision.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Slider } from '@ark-ui/svelte/slider'
+  import styles from 'styles/slider.module.css'
+</script>
+
+<Slider.Root thumbCollisionBehavior="push" defaultValue={[25, 60]} class={styles.Root}>
+  <div style="display: flex; justify-content: space-between;">
+    <Slider.Label class={styles.Label}>Label</Slider.Label>
+    <Slider.ValueText class={styles.ValueText} />
+  </div>
+  <Slider.Control class={styles.Control}>
+    <Slider.Track class={styles.Track}>
+      <Slider.Range class={styles.Range} />
+    </Slider.Track>
+    <Slider.Thumb index={0} class={styles.Thumb}>
+      <Slider.HiddenInput />
+    </Slider.Thumb>
+    <Slider.Thumb index={1} class={styles.Thumb}>
+      <Slider.HiddenInput />
+    </Slider.Thumb>
+  </Slider.Control>
+</Slider.Root>

packages/svelte/src/lib/components/slider/slider.stories.ts

@@ -9,6 +9,7 @@ import RangeExample from './examples/range.svelte'
 import RootProviderExample from './examples/root-provider.svelte'
 import StepExample from './examples/step.svelte'
 import ThumbAlignmentExample from './examples/thumb-alignment.svelte'
+import ThumbCollisionExample from './examples/thumb-collision.svelte'
 import ThumbOverlapExample from './examples/thumb-overlap.svelte'
 import VerticalExample from './examples/vertical.svelte'
 import WithMarksExample from './examples/with-marks.svelte'
@@ -81,6 +82,12 @@ export const ThumbAlignment: Story = {
   }),
 }
 
+export const ThumbCollision: Story = {
+  render: () => ({
+    Component: ThumbCollisionExample,
+  }),
+}
+
 export const ThumbOverlap: Story = {
   render: () => ({
     Component: ThumbOverlapExample,

packages/vue/src/components/slider/examples/thumb-collision.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Slider } from '@ark-ui/vue/slider'
+import styles from 'styles/slider.module.css'
+</script>
+
+<template>
+  <Slider.Root thumb-collision-behavior="push" :default-value="[25, 60]" :class="styles.Root">
+    <div :style="{ display: 'flex', justifyContent: 'space-between' }">
+      <Slider.Label :class="styles.Label">Label</Slider.Label>
+      <Slider.ValueText :class="styles.ValueText" />
+    </div>
+    <Slider.Control :class="styles.Control">
+      <Slider.Track :class="styles.Track">
+        <Slider.Range :class="styles.Range" />
+      </Slider.Track>
+      <Slider.Thumb :index="0" :class="styles.Thumb">
+        <Slider.HiddenInput />
+      </Slider.Thumb>
+      <Slider.Thumb :index="1" :class="styles.Thumb">
+        <Slider.HiddenInput />
+      </Slider.Thumb>
+    </Slider.Control>
+  </Slider.Root>
+</template>

packages/vue/src/components/slider/slider.stories.ts

@@ -10,6 +10,7 @@ import RangeExample from './examples/range.vue'
 import RootProviderExample from './examples/root-provider.vue'
 import StepExample from './examples/step.vue'
 import ThumbAlignmentExample from './examples/thumb-alignment.vue'
+import ThumbCollisionExample from './examples/thumb-collision.vue'
 import ThumbOverlapExample from './examples/thumb-overlap.vue'
 import VerticalExample from './examples/vertical.vue'
 import WithMarksExample from './examples/with-marks.vue'
@@ -90,6 +91,13 @@ export const ThumbAlignment = {
   }),
 }
 
+export const ThumbCollision = {
+  render: () => ({
+    components: { Component: ThumbCollisionExample },
+    template: '<Component />',
+  }),
+}
+
 export const ThumbOverlap = {
   render: () => ({
     components: { Component: ThumbOverlapExample },

website/src/content/pages/components/slider.mdx

@@ -111,6 +111,13 @@ thumbs, which is useful for price range filters and similar use cases.
 
 <Example id="thumb-overlap" />
 
+### Thumb Collision
+
+Use the `thumbCollisionBehavior` prop to control how thumbs behave when they collide during pointer interactions.
+Supported values are `push` (default), `swap`, and `none`.
+
+<Example id="thumb-collision" />
+
 ## API Reference
 
 ### Props

website/src/lib/example-registry.ts

@@ -433,6 +433,7 @@ import * as Slider_Range from '@examples/slider/examples/range'
 import * as Slider_RootProvider from '@examples/slider/examples/root-provider'
 import * as Slider_Step from '@examples/slider/examples/step'
 import * as Slider_ThumbAlignment from '@examples/slider/examples/thumb-alignment'
+import * as Slider_ThumbCollision from '@examples/slider/examples/thumb-collision'
 import * as Slider_ThumbOverlap from '@examples/slider/examples/thumb-overlap'
 import * as Slider_Vertical from '@examples/slider/examples/vertical'
 import * as Slider_WithMarks from '@examples/slider/examples/with-marks'
@@ -980,6 +981,7 @@ const exampleModules: Record<string, ExampleModule> = {
   'slider/root-provider': Slider_RootProvider,
   'slider/step': Slider_Step,
   'slider/thumb-alignment': Slider_ThumbAlignment,
+  'slider/thumb-collision': Slider_ThumbCollision,
   'slider/thumb-overlap': Slider_ThumbOverlap,
   'slider/vertical': Slider_Vertical,
   'slider/with-marks': Slider_WithMarks,