diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 3ac83e15..0391ef18 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -57,10 +57,17 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<DatePicker datePickerType="single">
+<DatePicker datePickerType="single" on:change>
   <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### Range
+
+<DatePicker datePickerType="range" on:change>
+  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Skeleton
 
 <DatePickerSkeleton />
\ No newline at end of file
diff --git a/docs/vite.config.js b/docs/vite.config.js
index e3503c41..08b20aef 100644
--- a/docs/vite.config.js
+++ b/docs/vite.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   optimizeDeps: {
-    include: ["clipboard-copy"],
+    include: ["clipboard-copy", "flatpickr/dist/plugins/rangePlugin"],
     exclude: ["@sveltech/routify"],
   },
 };