first

documentation/plugins/slider/slider-merging-documentation.md

@@ -0,0 +1,56 @@
+---
+state:
+  value:
+    - 20
+    - 50
+    - 70
+  merge: 10
+---
+
+### Tooltip merging
+
+The `<Slider />` component can automatically merge multiple tooltips when they
+reach a certain threshold. Specify a `merge` value and pass it to the
+component's `:merge` prop.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+
+const value = ref([20, 50, 70])
+const merge = 10
+</script>
+
+<template>
+  <VField v-slot="{ id }">
+    <VControl>
+      <Slider
+        :id="id"
+        v-model="value"
+        :merge="merge"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns mt-2">
+  <div class="column is-6">
+    <VField v-slot="{ id }" class="pt-5 px-4 is-slider-info">
+      <VControl>
+        <Slider 
+          :id="id"
+          v-model="frontmatter.state.value" 
+          :merge="frontmatter.state.merge"
+        />
+      </VControl>
+    </VField>
+  </div>
+</div>
+
+<!--/example-->